﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>
  <title>Rukada - Responsive Bootstrap4  Admin Dashboard Template</title>
  <!--favicon-->
  <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
  <!-- simplebar CSS-->
  <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
  <!-- Bootstrap core CSS-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
  <!-- animate CSS-->
  <link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
  <!-- Icons CSS-->
  <link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
  <!-- Sidebar CSS-->
  <link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
  <!-- Custom Style-->
  <link href="assets/css/app-style.css" rel="stylesheet"/>
  
</head>

<body>

<!-- Start wrapper-->
 <div id="wrapper">
 
  <!--Start sidebar-wrapper-->
   <div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
     <div class="brand-logo">
      <a href="index.html">
       <img src="assets/images/logo-icon.png" class="logo-icon" alt="logo icon">
       <h5 class="logo-text">Rukada Admin</h5>
     </a>
   </div>
   <ul class="sidebar-menu do-nicescrol">
      <li class="sidebar-header">MAIN NAVIGATION</li>
      <li>
        <a href="index.html" class="waves-effect">
          <i class="zmdi zmdi-view-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="index.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v1</a></li>
          <li><a href="index2.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v2</a></li>
          <li><a href="index3.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v3</a></li>
          <li><a href="index4.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v4</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-layers"></i>
          <span>UI Elements</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
        <li><a href="ui-checkbox-radio.html"><i class="zmdi zmdi-star-outline"></i> Checkboxes & Radios</a></li>
        <li><a href="ui-nav-tabs.html"><i class="zmdi zmdi-star-outline"></i> Nav Tabs</a></li>
        <li><a href="ui-accordions.html"><i class="zmdi zmdi-star-outline"></i> Accordions</a></li>
        <li><a href="ui-modals.html"><i class="zmdi zmdi-star-outline"></i> Modals</a></li>
        <li><a href="ui-typography.html"><i class="zmdi zmdi-star-outline"></i> Typography</a></li>
        <li><a href="ui-list-groups.html"><i class="zmdi zmdi-star-outline"></i> List Groups</a></li>
        <li><a href="ui-bootstrap-elements.html"><i class="zmdi zmdi-star-outline"></i> BS Elements</a></li>
        <li><a href="ui-pagination.html"><i class="zmdi zmdi-star-outline"></i> Pagination</a></li>
        <li><a href="ui-alerts.html"><i class="zmdi zmdi-star-outline"></i> Alerts</a></li>
        <li><a href="ui-progressbars.html"><i class="zmdi zmdi-star-outline"></i> Progress Bars</a></li>
        <li><a href="ui-notification.html"><i class="zmdi zmdi-star-outline"></i> Notifications</a></li>
        <li><a href="ui-sweet-alert.html"><i class="zmdi zmdi-star-outline"></i> Sweet Alerts</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-gamepad"></i> <span>BS Cards</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="cards-image-cards.html"><i class="zmdi zmdi-star-outline"></i> Image Cards</a></li>
          <li><a href="cards-text-cards.html"><i class="zmdi zmdi-star-outline"></i> Text Cards</a></li>
          <li><a href="cards-profile-cards.html"><i class="zmdi zmdi-star-outline"></i> Profile Cards</a></li>
          <li><a href="cards-social-cards.html"><i class="zmdi zmdi-star-outline"></i> Social Cards</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-cloud-done"></i> <span>Buttons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="buttons-default-button.html"><i class="zmdi zmdi-star-outline"></i> Default Button</a></li>
          <li><a href="buttons-dropdown-buttons.html"><i class="zmdi zmdi-star-outline"></i> Dropdown Buttons</a></li>
          <li><a href="buttons-group-buttons.html"><i class="zmdi zmdi-star-outline"></i> Group Buttons</a></li>
          <li><a href="buttons-icon-buttons.html"><i class="zmdi zmdi-star-outline"></i> Icon Buttons</a></li>
          <li><a href="buttons-outline-buttons.html"><i class="zmdi zmdi-star-outline"></i> Outline Buttons</a></li>
          <li><a href="buttons-social-buttons.html"><i class="zmdi zmdi-star-outline"></i> Social Buttons</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-card-travel"></i>
          <span>Components</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="components-range-slider.html"><i class="zmdi zmdi-star-outline"></i> Range Sliders</a></li>
          <li><a href="components-image-carousel.html"><i class="zmdi zmdi-star-outline"></i> Image Carousels</a></li>
          <li><a href="components-grid-layouts.html"><i class="zmdi zmdi-star-outline"></i> Grid Layouts</a></li>
          <li><a href="components-tree-view-menu.html"><i class="zmdi zmdi-star-outline"></i> Tree View</a></li>
          <li><a href="components-nestable.html"><i class="zmdi zmdi-star-outline"></i> Nesteble</a></li>
          <li><a href="components-switcher-buttons.html"><i class="zmdi zmdi-star-outline"></i> Switcher Buttons</a></li>
          <li><a href="components-pricing-table.html"><i class="zmdi zmdi-star-outline"></i> Pricing Tables</a></li>
          <li><a href="components-vertical-timeline.html"><i class="zmdi zmdi-star-outline"></i> Vertical Timeline</a></li>
          <li><a href="components-horizontal-timeline.html"><i class="zmdi zmdi-star-outline"></i> Horizontal Timeline</a></li>
          <li><a href="components-fancy-lightbox.html"><i class="zmdi zmdi-star-outline"></i> Fancy Lightbox</a></li>          
          <li><a href="components-color-palette.html"><i class="zmdi zmdi-star-outline"></i> Color Palette</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-chart"></i> <span>Charts</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="charts-chartjs.html"><i class="zmdi zmdi-star-outline"></i> Chart JS</a></li>
          <li><a href="charts-morris.html"><i class="zmdi zmdi-star-outline"></i> Morris Charts</a></li>
          <li><a href="charts-sparkline.html"><i class="zmdi zmdi-star-outline"></i> Sparkline Charts</a></li>
          <li><a href="charts-peity.html"><i class="zmdi zmdi-star-outline"></i> Peity Charts</a></li>
          <li><a href="charts-c3-charts.html"><i class="zmdi zmdi-star-outline"></i> C3 Charts</a></li>
          <li><a href="charts-other.html"><i class="zmdi zmdi-star-outline"></i> Other Charts</a></li>
          <li><a href="charts-flot.html"><i class="zmdi zmdi-star-outline"></i> Flot Chart</a></li>
        </ul>
       </li>
      <li>
        <a href="calendar.html" class="waves-effect">
          <i class="zmdi zmdi-calendar-check"></i> <span>Calendar</span>
          <small class="badge float-right badge-info">New</small>
        </a>
      </li>
    
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-email"></i>
          <span>Mailbox</span>
           <small class="badge float-right badge-warning">12</small>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="mail-inbox.html"><i class="zmdi zmdi-star-outline"></i> Inbox</a></li>
          <li><a href="mail-compose.html"><i class="zmdi zmdi-star-outline"></i> Compose</a></li>
          <li><a href="mail-read.html"><i class="zmdi zmdi-star-outline"></i> Read Mail</a></li>
        </ul>
      </li>
      
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-format-list-bulleted"></i> <span>Forms</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="form-inputs.html"><i class="zmdi zmdi-star-outline"></i> Basic Inputs</a></li>
          <li><a href="form-input-group.html"><i class="zmdi zmdi-star-outline"></i> Input Groups</a></li>
          <li><a href="form-layouts.html"><i class="zmdi zmdi-star-outline"></i> Form Layouts</a></li>
          <li><a href="form-advanced.html"><i class="zmdi zmdi-star-outline"></i> Form Advanced</a></li>
          <li><a href="form-uploads.html"><i class="zmdi zmdi-star-outline"></i> Form Uploads</a></li>
          <li><a href="form-validation.html"><i class="zmdi zmdi-star-outline"></i> Form Validation</a></li>
          <li><a href="form-step-wizard.html"><i class="zmdi zmdi-star-outline"></i> Form Wizard</a></li>
          <li><a href="form-text-editor.html"><i class="zmdi zmdi-star-outline"></i> Form Editor</a></li>
        </ul>
      </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-lock"></i> <span>Authentication</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="authentication-signin.html"><i class="zmdi zmdi-star-outline"></i> SignIn 1</a></li>
          <li><a href="authentication-signup.html"><i class="zmdi zmdi-star-outline"></i> SignUp 1</a></li>
          <li><a href="authentication-lock-screen.html"><i class="zmdi zmdi-star-outline"></i> Lock Screen</a></li>
          <li><a href="authentication-reset-password.html"><i class="zmdi zmdi-star-outline"></i> Reset Password 1</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-invert-colors"></i> <span>UI Icons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="icons-font-awesome.html"><i class="zmdi zmdi-star-outline"></i> Font Awesome</a></li>
          <li><a href="icons-material-designs.html"><i class="zmdi zmdi-star-outline"></i> Material Design</a></li>
          <li><a href="icons-themify.html"><i class="zmdi zmdi-star-outline"></i> Themify Icons</a></li>
          <li><a href="icons-simple-line-icons.html"><i class="zmdi zmdi-star-outline"></i> Line Icons</a></li>
          <li><a href="icons-flags.html"><i class="zmdi zmdi-star-outline"></i> Flag Icons</a></li>
        </ul>
      </li>
    
       <li>
        <a href="widgets.html" class="waves-effect">
          <i class="zmdi zmdi-widgets"></i> <span>Widgets</span>
          <small class="badge float-right badge-danger">10</small>
        </a>
      </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-grid"></i> <span>Tables</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="table-simple-tables.html"><i class="zmdi zmdi-star-outline"></i> Simple Tables</a></li>
          <li><a href="table-header-tables.html"><i class="zmdi zmdi-star-outline"></i> Header Tables</a></li>
          <li><a href="table-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Color Tables</a></li>
          <li><a href="table-striped-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Striped Color Tables</a></li>
          <li><a href="table-data-tables.html"><i class="zmdi zmdi-star-outline"></i> Data Tables</a></li>
        </ul>
       </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-map"></i> <span>Maps</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="maps-google.html"><i class="zmdi zmdi-star-outline"></i> Google Maps</a></li>
          <li><a href="maps-vector.html"><i class="zmdi zmdi-star-outline"></i> Vector Maps</a></li>
        </ul>
       </li>
     
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-collection-folder-image"></i> <span>Sample Pages</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
              <li><a href="pages-invoice.html"><i class="zmdi zmdi-star-outline"></i> Invoice</a></li>
          <li><a href="pages-user-profile.html"><i class="zmdi zmdi-star-outline"></i> User Profile</a></li>
          <li><a href="pages-blank-page.html"><i class="zmdi zmdi-star-outline"></i> Blank Page</a></li>
              <li><a href="pages-coming-soon.html"><i class="zmdi zmdi-star-outline"></i> Coming Soon</a></li>
          <li><a href="pages-403.html"><i class="zmdi zmdi-star-outline"></i> 403 Error</a></li>
          <li><a href="pages-404.html"><i class="zmdi zmdi-star-outline"></i> 404 Error</a></li>
          <li><a href="pages-500.html"><i class="zmdi zmdi-star-outline"></i> 500 Error</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="fa fa-share"></i> <span>Multilevel</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
          <li>
            <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
            <ul class="sidebar-submenu">
              <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two</a></li>
              <li>
                <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="sidebar-submenu">
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
        </ul>
      </li>
      <li class="sidebar-header">LABELS</li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-coffee text-danger"></i> <span>Important</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-chart-donut text-success"></i> <span>Warning</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a></li>
    </ul>
   
   </div>
   <!--End sidebar-wrapper-->

<!--Start topbar header-->
<header class="topbar-nav">
 <nav class="navbar navbar-expand fixed-top bg-white">
  <ul class="navbar-nav mr-auto align-items-center">
    <li class="nav-item">
      <a class="nav-link toggle-menu" href="javascript:void();">
       <i class="icon-menu menu-icon"></i>
     </a>
    </li>
    <li class="nav-item">
      <form class="search-bar">
        <input type="text" class="form-control" placeholder="Enter keywords">
         <a href="javascript:void();"><i class="icon-magnifier"></i></a>
      </form>
    </li>
  </ul>
     
  <ul class="navbar-nav align-items-center right-nav-link">
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
      <i class="fa fa-envelope-open-o"></i><span class="badge badge-secondary badge-up">12</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
         <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 12 new messages
          <span class="badge badge-secondary">12</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-5.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Jhon Deo</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Today, 4:10 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-6.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Sara Jen</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Yesterday, 8:30 AM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-7.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Dannish Josh</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
             <small>5/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-8.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Katrina Mccoy</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet.</p>
            <small>1/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Messages</a></li>
        </ul>
        </div>
    </li>
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
    <i class="fa fa-bell-o"></i><span class="badge badge-info badge-up">14</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 14 Notifications
          <span class="badge badge-info">14</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-accounts fa-2x mr-3 text-primary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Registered Users</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-coffee fa-2x mr-3 text-success"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Received Orders</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-notifications-active fa-2x mr-3 text-secondary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Updates</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Notifications</a></li>
        </ul>
      </div>
    </li>
    <li class="nav-item language">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="#"><i class="flag-icon flag-icon-gb"></i></a>
      <ul class="dropdown-menu dropdown-menu-right">
          <li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
        </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
        <span class="user-profile"><img src="assets/images/avatars/avatar-13.png" class="img-circle" alt="user avatar"></span>
      </a>
      <ul class="dropdown-menu dropdown-menu-right">
       <li class="dropdown-item user-details">
        <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-13.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-2 user-title">Katrina Mccoy</h6>
            <p class="user-subtitle">mccoy@example.com</p>
            </div>
           </div>
          </a>
        </li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-power mr-2"></i> Logout</li>
      </ul>
    </li>
  </ul>
</nav>
</header>
<!--End topbar header-->

<div class="clearfix"></div>
	
  <div class="content-wrapper">
    <div class="container-fluid">
      <!-- Breadcrumb-->
     <div class="row pt-2 pb-2">
        <div class="col-sm-9">
		    <h4 class="page-title">Material Icons</h4>
		    <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javaScript:void();">Rukada</a></li>
            <li class="breadcrumb-item"><a href="javaScript:void();">Icons</a></li>
            <li class="breadcrumb-item active" aria-current="page">Material Icons</li>
         </ol>
	   </div>
     <div class="col-sm-3">
       <div class="btn-group float-sm-right">
        <button type="button" class="btn btn-outline-primary waves-effect waves-light"><i class="fa fa-cog mr-1"></i> Setting</button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown">
        <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a href="javaScript:void();" class="dropdown-item">Action</a>
          <a href="javaScript:void();" class="dropdown-item">Another action</a>
          <a href="javaScript:void();" class="dropdown-item">Something else here</a>
          <div class="dropdown-divider"></div>
          <a href="javaScript:void();" class="dropdown-item">Separated link</a>
        </div>
      </div>
     </div>
     </div>
    <!-- End Breadcrumb-->
      <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

           <div class="alert alert-icon-info alert-dismissible" role="alert">
             <button type="button" class="close" data-dismiss="alert">×</button>
            <div class="alert-icon border-right border-info">
             <i class="fa fa-bell"></i>
            </div>
            <div class="alert-message">
              <span><strong>Info!</strong> If you want more information about how to use them, you can visit </span> <a class="alert-link" href="http://zavoloklom.github.io/material-design-iconic-font/index.html" target="_blank">official site</a>.
            </div>
          </div>
          
          <h3>33 New Icons in 2.2</h3>
          <hr>
          <div class="row">
            <div class="col-lg-6 col-xl-3 icon">
              <a data-code="f3e9" data-name="group" href="javascript:void();"><i class="zmdi zmdi-group"></i> <span>group</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon">
              <a data-code="f3ea" data-name="rss" href="javascript:void();"><i class="zmdi zmdi-rss"></i> <span>rss</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3eb" data-name="shape">
              <a href="javascript:void();"><i class="zmdi zmdi-shape"></i> <span>shape</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3ec" data-name="spinner">
              <a href="javascript:void();"><i class="zmdi zmdi-spinner"></i> <span>spinner</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3ed" data-name="ungroup">
              <a href="javascript:void();"><i class="zmdi zmdi-ungroup"></i> <span>ungroup</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3ee" data-name="500px">
              <a href="javascript:void();"><i class="zmdi zmdi-500px"></i> <span>500px</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3ef" data-name="8tracks">
              <a href="javascript:void();"><i class="zmdi zmdi-8tracks"></i> <span>8tracks</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f0" data-name="amazon">
              <a href="javascript:void();"><i class="zmdi zmdi-amazon"></i> <span>amazon</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f1" data-name="blogger">
              <a href="javascript:void();"><i class="zmdi zmdi-blogger"></i> <span>blogger</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f2" data-name="delicious">
              <a href="javascript:void();"><i class="zmdi zmdi-delicious"></i> <span>delicious</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f3" data-name="disqus">
              <a href="javascript:void();"><i class="zmdi zmdi-disqus"></i> <span>disqus</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f4" data-name="flattr">
              <a href="javascript:void();"><i class="zmdi zmdi-flattr"></i> <span>flattr</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f5" data-name="flickr">
              <a href="javascript:void();"><i class="zmdi zmdi-flickr"></i> <span>flickr</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f6" data-name="github-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-github-alt"></i> <span>github-alt</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f7" data-name="google-old">
              <a href="javascript:void();"><i class="zmdi zmdi-google-old"></i> <span>google-old</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f8" data-name="linkedin">
              <a href="javascript:void();"><i class="zmdi zmdi-linkedin"></i> <span>linkedin</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3f9" data-name="odnoklassniki">
              <a href="javascript:void();"><i class="zmdi zmdi-odnoklassniki"></i> <span>odnoklassniki</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3fa" data-name="outlook">
              <a href="javascript:void();"><i class="zmdi zmdi-outlook"></i> <span>outlook</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3fb" data-name="paypal-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-paypal-alt"></i> <span>paypal-alt</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3fc" data-name="pinterest">
              <a href="javascript:void();"><i class="zmdi zmdi-pinterest"></i> <span>pinterest</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3fd" data-name="playstation">
              <a href="javascript:void();"><i class="zmdi zmdi-playstation"></i> <span>playstation</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3fe" data-name="reddit">
              <a href="javascript:void();"><i class="zmdi zmdi-reddit"></i> <span>reddit</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f3ff" data-name="skype">
              <a href="javascript:void();"><i class="zmdi zmdi-skype"></i> <span>skype</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f400" data-name="slideshare">
              <a href="javascript:void();"><i class="zmdi zmdi-slideshare"></i> <span>slideshare</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f401" data-name="soundcloud">
              <a href="javascript:void();"><i class="zmdi zmdi-soundcloud"></i> <span>soundcloud</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f402" data-name="tumblr">
              <a href="javascript:void();"><i class="zmdi zmdi-tumblr"></i> <span>tumblr</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f403" data-name="twitch">
              <a href="javascript:void();"><i class="zmdi zmdi-twitch"></i> <span>twitch</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f404" data-name="vimeo">
              <a href="javascript:void();"><i class="zmdi zmdi-vimeo"></i> <span>vimeo</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f405" data-name="whatsapp">
              <a href="javascript:void();"><i class="zmdi zmdi-whatsapp"></i> <span>whatsapp</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f406" data-name="xbox">
              <a href="javascript:void();"><i class="zmdi zmdi-xbox"></i> <span>xbox</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f407" data-name="yahoo">
              <a href="javascript:void();"><i class="zmdi zmdi-yahoo"></i> <span>yahoo</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f408" data-name="youtube-play">
              <a href="javascript:void();"><i class="zmdi zmdi-youtube-play"></i> <span>youtube-play</span></a>
            </div>
            <div class="col-lg-6 col-xl-3 icon" data-code="f409" data-name="youtube">
              <a href="javascript:void();"><i class="zmdi zmdi-youtube"></i> <span>youtube</span></a>
            </div>
          </div><!--End Row-->
          <h3>This icon has changed since version 2.1</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f34e" data-name="google">
              <a href="javascript:void();"><i class="zmdi zmdi-google"></i> <span>google</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34c" data-name="google-plus-box">
              <a href="javascript:void();"><i class="zmdi zmdi-google-plus-box"></i> <span>google-plus-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34d" data-name="google-plus">
              <a href="javascript:void();"><i class="zmdi zmdi-google-plus"></i> <span>google-plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f357" data-name="paypal">
              <a href="javascript:void();"><i class="zmdi zmdi-paypal"></i> <span>paypal</span></a>
            </div>
          </div>
          <h3>Web Application</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f101" data-name="3d-rotation">
              <a href="javascript:void();"><i class="zmdi zmdi-3d-rotation"></i> <span>3d-rotation</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f102" data-name="airplane-off">
              <a href="javascript:void();"><i class="zmdi zmdi-airplane-off"></i> <span>airplane-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f103" data-name="airplane">
              <a href="javascript:void();"><i class="zmdi zmdi-airplane"></i> <span>airplane</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f104" data-name="album">
              <a href="javascript:void();"><i class="zmdi zmdi-album"></i> <span>album</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f105" data-name="archive">
              <a href="javascript:void();"><i class="zmdi zmdi-archive"></i> <span>archive</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f106" data-name="assignment-account">
              <a href="javascript:void();"><i class="zmdi zmdi-assignment-account"></i> <span>assignment-account</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f107" data-name="assignment-alert">
              <a href="javascript:void();"><i class="zmdi zmdi-assignment-alert"></i> <span>assignment-alert</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f108" data-name="assignment-check">
              <a href="javascript:void();"><i class="zmdi zmdi-assignment-check"></i> <span>assignment-check</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f109" data-name="assignment-o">
              <a href="javascript:void();"><i class="zmdi zmdi-assignment-o"></i> <span>assignment-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f10a" data-name="assignment-return">
              <a href="javascript:void();"><i class="zmdi zmdi-assignment-return"></i> <span>assignment-return</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f10b" data-name="assignment-returned">
              <a href="javascript:void();"><i class="zmdi zmdi-assignment-returned"></i> <span>assignment-returned</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f10c" data-name="assignment">
              <a href="javascript:void();"><i class="zmdi zmdi-assignment"></i> <span>assignment</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f10d" data-name="attachment-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-attachment-alt"></i> <span>attachment-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f10e" data-name="attachment">
              <a href="javascript:void();"><i class="zmdi zmdi-attachment"></i> <span>attachment</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f10f" data-name="audio">
              <a href="javascript:void();"><i class="zmdi zmdi-audio"></i> <span>audio</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f110" data-name="badge-check">
              <a href="javascript:void();"><i class="zmdi zmdi-badge-check"></i> <span>badge-check</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f111" data-name="balance-wallet">
              <a href="javascript:void();"><i class="zmdi zmdi-balance-wallet"></i> <span>balance-wallet</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f112" data-name="balance">
              <a href="javascript:void();"><i class="zmdi zmdi-balance"></i> <span>balance</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f113" data-name="battery-alert">
              <a href="javascript:void();"><i class="zmdi zmdi-battery-alert"></i> <span>battery-alert</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f114" data-name="battery-flash">
              <a href="javascript:void();"><i class="zmdi zmdi-battery-flash"></i> <span>battery-flash</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f115" data-name="battery-unknown">
              <a href="javascript:void();"><i class="zmdi zmdi-battery-unknown"></i> <span>battery-unknown</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f116" data-name="battery">
              <a href="javascript:void();"><i class="zmdi zmdi-battery"></i> <span>battery</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f117" data-name="bike">
              <a href="javascript:void();"><i class="zmdi zmdi-bike"></i> <span>bike</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f118" data-name="block-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-block-alt"></i> <span>block-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f119" data-name="block">
              <a href="javascript:void();"><i class="zmdi zmdi-block"></i> <span>block</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f11a" data-name="boat">
              <a href="javascript:void();"><i class="zmdi zmdi-boat"></i> <span>boat</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f11b" data-name="book-image">
              <a href="javascript:void();"><i class="zmdi zmdi-book-image"></i> <span>book-image</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f11c" data-name="book">
              <a href="javascript:void();"><i class="zmdi zmdi-book"></i> <span>book</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f11d" data-name="bookmark-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-bookmark-outline"></i> <span>bookmark-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f11e" data-name="bookmark">
              <a href="javascript:void();"><i class="zmdi zmdi-bookmark"></i> <span>bookmark</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f11f" data-name="brush">
              <a href="javascript:void();"><i class="zmdi zmdi-brush"></i> <span>brush</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f120" data-name="bug">
              <a href="javascript:void();"><i class="zmdi zmdi-bug"></i> <span>bug</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f121" data-name="bus">
              <a href="javascript:void();"><i class="zmdi zmdi-bus"></i> <span>bus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f122" data-name="cake">
              <a href="javascript:void();"><i class="zmdi zmdi-cake"></i> <span>cake</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f123" data-name="car-taxi">
              <a href="javascript:void();"><i class="zmdi zmdi-car-taxi"></i> <span>car-taxi</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f124" data-name="car-wash">
              <a href="javascript:void();"><i class="zmdi zmdi-car-wash"></i> <span>car-wash</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f125" data-name="car">
              <a href="javascript:void();"><i class="zmdi zmdi-car"></i> <span>car</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f126" data-name="card-giftcard">
              <a href="javascript:void();"><i class="zmdi zmdi-card-giftcard"></i> <span>card-giftcard</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f127" data-name="card-membership">
              <a href="javascript:void();"><i class="zmdi zmdi-card-membership"></i> <span>card-membership</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f128" data-name="card-travel">
              <a href="javascript:void();"><i class="zmdi zmdi-card-travel"></i> <span>card-travel</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f129" data-name="card">
              <a href="javascript:void();"><i class="zmdi zmdi-card"></i> <span>card</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f12a" data-name="case-check">
              <a href="javascript:void();"><i class="zmdi zmdi-case-check"></i> <span>case-check</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f12b" data-name="case-download">
              <a href="javascript:void();"><i class="zmdi zmdi-case-download"></i> <span>case-download</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f12c" data-name="case-play">
              <a href="javascript:void();"><i class="zmdi zmdi-case-play"></i> <span>case-play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f12d" data-name="case">
              <a href="javascript:void();"><i class="zmdi zmdi-case"></i> <span>case</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f12e" data-name="cast-connected">
              <a href="javascript:void();"><i class="zmdi zmdi-cast-connected"></i> <span>cast-connected</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f12f" data-name="cast">
              <a href="javascript:void();"><i class="zmdi zmdi-cast"></i> <span>cast</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f130" data-name="chart-donut">
              <a href="javascript:void();"><i class="zmdi zmdi-chart-donut"></i> <span>chart-donut</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f131" data-name="chart">
              <a href="javascript:void();"><i class="zmdi zmdi-chart"></i> <span>chart</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f132" data-name="city-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-city-alt"></i> <span>city-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f133" data-name="city">
              <a href="javascript:void();"><i class="zmdi zmdi-city"></i> <span>city</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f134" data-name="close-circle-o">
              <a href="javascript:void();"><i class="zmdi zmdi-close-circle-o"></i> <span>close-circle-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f135" data-name="close-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-close-circle"></i> <span>close-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f136" data-name="close">
              <a href="javascript:void();"><i class="zmdi zmdi-close"></i> <span>close</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f137" data-name="cocktail">
              <a href="javascript:void();"><i class="zmdi zmdi-cocktail"></i> <span>cocktail</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f138" data-name="code-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-code-setting"></i> <span>code-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f139" data-name="code-smartphone">
              <a href="javascript:void();"><i class="zmdi zmdi-code-smartphone"></i> <span>code-smartphone</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f13a" data-name="code">
              <a href="javascript:void();"><i class="zmdi zmdi-code"></i> <span>code</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f13b" data-name="coffee">
              <a href="javascript:void();"><i class="zmdi zmdi-coffee"></i> <span>coffee</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f13c" data-name="collection-bookmark">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-bookmark"></i> <span>collection-bookmark</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f13d" data-name="collection-case-play">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-case-play"></i> <span>collection-case-play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f13e" data-name="collection-folder-image">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-folder-image"></i> <span>collection-folder-image</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f13f" data-name="collection-image-o">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-image-o"></i> <span>collection-image-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f140" data-name="collection-image">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-image"></i> <span>collection-image</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f141" data-name="collection-item-1">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-1"></i> <span>collection-item-1</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f142" data-name="collection-item-2">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-2"></i> <span>collection-item-2</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f143" data-name="collection-item-3">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-3"></i> <span>collection-item-3</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f144" data-name="collection-item-4">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-4"></i> <span>collection-item-4</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f145" data-name="collection-item-5">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-5"></i> <span>collection-item-5</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f146" data-name="collection-item-6">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-6"></i> <span>collection-item-6</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f147" data-name="collection-item-7">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-7"></i> <span>collection-item-7</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f148" data-name="collection-item-8">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-8"></i> <span>collection-item-8</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f149" data-name="collection-item-9-plus">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-9-plus"></i> <span>collection-item-9-plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f14a" data-name="collection-item-9">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item-9"></i> <span>collection-item-9</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f14b" data-name="collection-item">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-item"></i> <span>collection-item</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f14c" data-name="collection-music">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-music"></i> <span>collection-music</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f14d" data-name="collection-pdf">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-pdf"></i> <span>collection-pdf</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f14e" data-name="collection-plus">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-plus"></i> <span>collection-plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f14f" data-name="collection-speaker">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-speaker"></i> <span>collection-speaker</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f150" data-name="collection-text">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-text"></i> <span>collection-text</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f151" data-name="collection-video">
              <a href="javascript:void();"><i class="zmdi zmdi-collection-video"></i> <span>collection-video</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f152" data-name="compass">
              <a href="javascript:void();"><i class="zmdi zmdi-compass"></i> <span>compass</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f153" data-name="cutlery">
              <a href="javascript:void();"><i class="zmdi zmdi-cutlery"></i> <span>cutlery</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f154" data-name="delete">
              <a href="javascript:void();"><i class="zmdi zmdi-delete"></i> <span>delete</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f155" data-name="dialpad">
              <a href="javascript:void();"><i class="zmdi zmdi-dialpad"></i> <span>dialpad</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f156" data-name="dns">
              <a href="javascript:void();"><i class="zmdi zmdi-dns"></i> <span>dns</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f157" data-name="drink">
              <a href="javascript:void();"><i class="zmdi zmdi-drink"></i> <span>drink</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f158" data-name="edit">
              <a href="javascript:void();"><i class="zmdi zmdi-edit"></i> <span>edit</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f159" data-name="email-open">
              <a href="javascript:void();"><i class="zmdi zmdi-email-open"></i> <span>email-open</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f15a" data-name="email">
              <a href="javascript:void();"><i class="zmdi zmdi-email"></i> <span>email</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f15b" data-name="eye-off">
              <a href="javascript:void();"><i class="zmdi zmdi-eye-off"></i> <span>eye-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f15c" data-name="eye">
              <a href="javascript:void();"><i class="zmdi zmdi-eye"></i> <span>eye</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f15d" data-name="eyedropper">
              <a href="javascript:void();"><i class="zmdi zmdi-eyedropper"></i> <span>eyedropper</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f15e" data-name="favorite-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-favorite-outline"></i> <span>favorite-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f15f" data-name="favorite">
              <a href="javascript:void();"><i class="zmdi zmdi-favorite"></i> <span>favorite</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f160" data-name="filter-list">
              <a href="javascript:void();"><i class="zmdi zmdi-filter-list"></i> <span>filter-list</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f161" data-name="fire">
              <a href="javascript:void();"><i class="zmdi zmdi-fire"></i> <span>fire</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f162" data-name="flag">
              <a href="javascript:void();"><i class="zmdi zmdi-flag"></i> <span>flag</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f163" data-name="flare">
              <a href="javascript:void();"><i class="zmdi zmdi-flare"></i> <span>flare</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f164" data-name="flash-auto">
              <a href="javascript:void();"><i class="zmdi zmdi-flash-auto"></i> <span>flash-auto</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f165" data-name="flash-off">
              <a href="javascript:void();"><i class="zmdi zmdi-flash-off"></i> <span>flash-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f166" data-name="flash">
              <a href="javascript:void();"><i class="zmdi zmdi-flash"></i> <span>flash</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f167" data-name="flip">
              <a href="javascript:void();"><i class="zmdi zmdi-flip"></i> <span>flip</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f168" data-name="flower-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-flower-alt"></i> <span>flower-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f169" data-name="flower">
              <a href="javascript:void();"><i class="zmdi zmdi-flower"></i> <span>flower</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f16a" data-name="font">
              <a href="javascript:void();"><i class="zmdi zmdi-font"></i> <span>font</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f16b" data-name="fullscreen-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-fullscreen-alt"></i> <span>fullscreen-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f16c" data-name="fullscreen-exit">
              <a href="javascript:void();"><i class="zmdi zmdi-fullscreen-exit"></i> <span>fullscreen-exit</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f16d" data-name="fullscreen">
              <a href="javascript:void();"><i class="zmdi zmdi-fullscreen"></i> <span>fullscreen</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f16e" data-name="functions">
              <a href="javascript:void();"><i class="zmdi zmdi-functions"></i> <span>functions</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f16f" data-name="gas-station">
              <a href="javascript:void();"><i class="zmdi zmdi-gas-station"></i> <span>gas-station</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f170" data-name="gesture">
              <a href="javascript:void();"><i class="zmdi zmdi-gesture"></i> <span>gesture</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f171" data-name="globe-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-globe-alt"></i> <span>globe-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f172" data-name="globe-lock">
              <a href="javascript:void();"><i class="zmdi zmdi-globe-lock"></i> <span>globe-lock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f173" data-name="globe">
              <a href="javascript:void();"><i class="zmdi zmdi-globe"></i> <span>globe</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f174" data-name="graduation-cap">
              <a href="javascript:void();"><i class="zmdi zmdi-graduation-cap"></i> <span>graduation-cap</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e9" data-name="group">
              <a href="javascript:void();"><i class="zmdi zmdi-group"></i> <span>group</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f175" data-name="home">
              <a href="javascript:void();"><i class="zmdi zmdi-home"></i> <span>home</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f176" data-name="hospital-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-hospital-alt"></i> <span>hospital-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f177" data-name="hospital">
              <a href="javascript:void();"><i class="zmdi zmdi-hospital"></i> <span>hospital</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f178" data-name="hotel">
              <a href="javascript:void();"><i class="zmdi zmdi-hotel"></i> <span>hotel</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f179" data-name="hourglass-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-hourglass-alt"></i> <span>hourglass-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f17a" data-name="hourglass-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-hourglass-outline"></i> <span>hourglass-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f17b" data-name="hourglass">
              <a href="javascript:void();"><i class="zmdi zmdi-hourglass"></i> <span>hourglass</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f17c" data-name="http">
              <a href="javascript:void();"><i class="zmdi zmdi-http"></i> <span>http</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f17d" data-name="image-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-image-alt"></i> <span>image-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f17e" data-name="image-o">
              <a href="javascript:void();"><i class="zmdi zmdi-image-o"></i> <span>image-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f17f" data-name="image">
              <a href="javascript:void();"><i class="zmdi zmdi-image"></i> <span>image</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f180" data-name="inbox">
              <a href="javascript:void();"><i class="zmdi zmdi-inbox"></i> <span>inbox</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f181" data-name="invert-colors-off">
              <a href="javascript:void();"><i class="zmdi zmdi-invert-colors-off"></i> <span>invert-colors-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f182" data-name="invert-colors">
              <a href="javascript:void();"><i class="zmdi zmdi-invert-colors"></i> <span>invert-colors</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f183" data-name="key">
              <a href="javascript:void();"><i class="zmdi zmdi-key"></i> <span>key</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f184" data-name="label-alt-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-label-alt-outline"></i> <span>label-alt-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f185" data-name="label-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-label-alt"></i> <span>label-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f186" data-name="label-heart">
              <a href="javascript:void();"><i class="zmdi zmdi-label-heart"></i> <span>label-heart</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f187" data-name="label">
              <a href="javascript:void();"><i class="zmdi zmdi-label"></i> <span>label</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f188" data-name="labels">
              <a href="javascript:void();"><i class="zmdi zmdi-labels"></i> <span>labels</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f189" data-name="lamp">
              <a href="javascript:void();"><i class="zmdi zmdi-lamp"></i> <span>lamp</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f18a" data-name="landscape">
              <a href="javascript:void();"><i class="zmdi zmdi-landscape"></i> <span>landscape</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f18b" data-name="layers-off">
              <a href="javascript:void();"><i class="zmdi zmdi-layers-off"></i> <span>layers-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f18c" data-name="layers">
              <a href="javascript:void();"><i class="zmdi zmdi-layers"></i> <span>layers</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f18d" data-name="library">
              <a href="javascript:void();"><i class="zmdi zmdi-library"></i> <span>library</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f18e" data-name="link">
              <a href="javascript:void();"><i class="zmdi zmdi-link"></i> <span>link</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f18f" data-name="lock-open">
              <a href="javascript:void();"><i class="zmdi zmdi-lock-open"></i> <span>lock-open</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f190" data-name="lock-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-lock-outline"></i> <span>lock-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f191" data-name="lock">
              <a href="javascript:void();"><i class="zmdi zmdi-lock"></i> <span>lock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f192" data-name="mail-reply-all">
              <a href="javascript:void();"><i class="zmdi zmdi-mail-reply-all"></i> <span>mail-reply-all</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f193" data-name="mail-reply">
              <a href="javascript:void();"><i class="zmdi zmdi-mail-reply"></i> <span>mail-reply</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f194" data-name="mail-send">
              <a href="javascript:void();"><i class="zmdi zmdi-mail-send"></i> <span>mail-send</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f195" data-name="mall">
              <a href="javascript:void();"><i class="zmdi zmdi-mall"></i> <span>mall</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f196" data-name="map">
              <a href="javascript:void();"><i class="zmdi zmdi-map"></i> <span>map</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f197" data-name="menu">
              <a href="javascript:void();"><i class="zmdi zmdi-menu"></i> <span>menu</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f198" data-name="money-box">
              <a href="javascript:void();"><i class="zmdi zmdi-money-box"></i> <span>money-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f199" data-name="money-off">
              <a href="javascript:void();"><i class="zmdi zmdi-money-off"></i> <span>money-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f19a" data-name="money">
              <a href="javascript:void();"><i class="zmdi zmdi-money"></i> <span>money</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f19b" data-name="more-vert">
              <a href="javascript:void();"><i class="zmdi zmdi-more-vert"></i> <span>more-vert</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f19c" data-name="more">
              <a href="javascript:void();"><i class="zmdi zmdi-more"></i> <span>more</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f19d" data-name="movie-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-movie-alt"></i> <span>movie-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f19e" data-name="movie">
              <a href="javascript:void();"><i class="zmdi zmdi-movie"></i> <span>movie</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f19f" data-name="nature-people">
              <a href="javascript:void();"><i class="zmdi zmdi-nature-people"></i> <span>nature-people</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a0" data-name="nature">
              <a href="javascript:void();"><i class="zmdi zmdi-nature"></i> <span>nature</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a1" data-name="navigation">
              <a href="javascript:void();"><i class="zmdi zmdi-navigation"></i> <span>navigation</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a2" data-name="open-in-browser">
              <a href="javascript:void();"><i class="zmdi zmdi-open-in-browser"></i> <span>open-in-browser</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a3" data-name="open-in-new">
              <a href="javascript:void();"><i class="zmdi zmdi-open-in-new"></i> <span>open-in-new</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a4" data-name="palette">
              <a href="javascript:void();"><i class="zmdi zmdi-palette"></i> <span>palette</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a5" data-name="parking">
              <a href="javascript:void();"><i class="zmdi zmdi-parking"></i> <span>parking</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a6" data-name="pin-account">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-account"></i> <span>pin-account</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a7" data-name="pin-assistant">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-assistant"></i> <span>pin-assistant</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a8" data-name="pin-drop">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-drop"></i> <span>pin-drop</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1a9" data-name="pin-help">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-help"></i> <span>pin-help</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1aa" data-name="pin-off">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-off"></i> <span>pin-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ab" data-name="pin">
              <a href="javascript:void();"><i class="zmdi zmdi-pin"></i> <span>pin</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ac" data-name="pizza">
              <a href="javascript:void();"><i class="zmdi zmdi-pizza"></i> <span>pizza</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ad" data-name="plaster">
              <a href="javascript:void();"><i class="zmdi zmdi-plaster"></i> <span>plaster</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ae" data-name="power-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-power-setting"></i> <span>power-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1af" data-name="power">
              <a href="javascript:void();"><i class="zmdi zmdi-power"></i> <span>power</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b0" data-name="print">
              <a href="javascript:void();"><i class="zmdi zmdi-print"></i> <span>print</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b1" data-name="puzzle-piece">
              <a href="javascript:void();"><i class="zmdi zmdi-puzzle-piece"></i> <span>puzzle-piece</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b2" data-name="quote">
              <a href="javascript:void();"><i class="zmdi zmdi-quote"></i> <span>quote</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b3" data-name="railway">
              <a href="javascript:void();"><i class="zmdi zmdi-railway"></i> <span>railway</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b4" data-name="receipt">
              <a href="javascript:void();"><i class="zmdi zmdi-receipt"></i> <span>receipt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b5" data-name="refresh-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-refresh-alt"></i> <span>refresh-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b6" data-name="refresh-sync-alert">
              <a href="javascript:void();"><i class="zmdi zmdi-refresh-sync-alert"></i> <span>refresh-sync-alert</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b7" data-name="refresh-sync-off">
              <a href="javascript:void();"><i class="zmdi zmdi-refresh-sync-off"></i> <span>refresh-sync-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b8" data-name="refresh-sync">
              <a href="javascript:void();"><i class="zmdi zmdi-refresh-sync"></i> <span>refresh-sync</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1b9" data-name="refresh">
              <a href="javascript:void();"><i class="zmdi zmdi-refresh"></i> <span>refresh</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ba" data-name="roller">
              <a href="javascript:void();"><i class="zmdi zmdi-roller"></i> <span>roller</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1bb" data-name="ruler">
              <a href="javascript:void();"><i class="zmdi zmdi-ruler"></i> <span>ruler</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1bc" data-name="scissors">
              <a href="javascript:void();"><i class="zmdi zmdi-scissors"></i> <span>scissors</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1bd" data-name="screen-rotation-lock">
              <a href="javascript:void();"><i class="zmdi zmdi-screen-rotation-lock"></i> <span>screen-rotation-lock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1be" data-name="screen-rotation">
              <a href="javascript:void();"><i class="zmdi zmdi-screen-rotation"></i> <span>screen-rotation</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1bf" data-name="search-for">
              <a href="javascript:void();"><i class="zmdi zmdi-search-for"></i> <span>search-for</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c0" data-name="search-in-file">
              <a href="javascript:void();"><i class="zmdi zmdi-search-in-file"></i> <span>search-in-file</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c1" data-name="search-in-page">
              <a href="javascript:void();"><i class="zmdi zmdi-search-in-page"></i> <span>search-in-page</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c2" data-name="search-replace">
              <a href="javascript:void();"><i class="zmdi zmdi-search-replace"></i> <span>search-replace</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c3" data-name="search">
              <a href="javascript:void();"><i class="zmdi zmdi-search"></i> <span>search</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c4" data-name="seat">
              <a href="javascript:void();"><i class="zmdi zmdi-seat"></i> <span>seat</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c5" data-name="settings-square">
              <a href="javascript:void();"><i class="zmdi zmdi-settings-square"></i> <span>settings-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c6" data-name="settings">
              <a href="javascript:void();"><i class="zmdi zmdi-settings"></i> <span>settings</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3eb" data-name="shape">
              <a href="javascript:void();"><i class="zmdi zmdi-shape"></i> <span>shape</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c7" data-name="shield-check">
              <a href="javascript:void();"><i class="zmdi zmdi-shield-check"></i> <span>shield-check</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c8" data-name="shield-security">
              <a href="javascript:void();"><i class="zmdi zmdi-shield-security"></i> <span>shield-security</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1c9" data-name="shopping-basket">
              <a href="javascript:void();"><i class="zmdi zmdi-shopping-basket"></i> <span>shopping-basket</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ca" data-name="shopping-cart-plus">
              <a href="javascript:void();"><i class="zmdi zmdi-shopping-cart-plus"></i> <span>shopping-cart-plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1cb" data-name="shopping-cart">
              <a href="javascript:void();"><i class="zmdi zmdi-shopping-cart"></i> <span>shopping-cart</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1cc" data-name="sign-in">
              <a href="javascript:void();"><i class="zmdi zmdi-sign-in"></i> <span>sign-in</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1cd" data-name="sort-amount-asc">
              <a href="javascript:void();"><i class="zmdi zmdi-sort-amount-asc"></i> <span>sort-amount-asc</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ce" data-name="sort-amount-desc">
              <a href="javascript:void();"><i class="zmdi zmdi-sort-amount-desc"></i> <span>sort-amount-desc</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1cf" data-name="sort-asc">
              <a href="javascript:void();"><i class="zmdi zmdi-sort-asc"></i> <span>sort-asc</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d0" data-name="sort-desc">
              <a href="javascript:void();"><i class="zmdi zmdi-sort-desc"></i> <span>sort-desc</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d1" data-name="spellcheck">
              <a href="javascript:void();"><i class="zmdi zmdi-spellcheck"></i> <span>spellcheck</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ec" data-name="spinner">
              <a href="javascript:void();"><i class="zmdi zmdi-spinner"></i> <span>spinner</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d2" data-name="storage">
              <a href="javascript:void();"><i class="zmdi zmdi-storage"></i> <span>storage</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d3" data-name="store-24">
              <a href="javascript:void();"><i class="zmdi zmdi-store-24"></i> <span>store-24</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d4" data-name="store">
              <a href="javascript:void();"><i class="zmdi zmdi-store"></i> <span>store</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d5" data-name="subway">
              <a href="javascript:void();"><i class="zmdi zmdi-subway"></i> <span>subway</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d6" data-name="sun">
              <a href="javascript:void();"><i class="zmdi zmdi-sun"></i> <span>sun</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d7" data-name="tab-unselected">
              <a href="javascript:void();"><i class="zmdi zmdi-tab-unselected"></i> <span>tab-unselected</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d8" data-name="tab">
              <a href="javascript:void();"><i class="zmdi zmdi-tab"></i> <span>tab</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1d9" data-name="tag-close">
              <a href="javascript:void();"><i class="zmdi zmdi-tag-close"></i> <span>tag-close</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1da" data-name="tag-more">
              <a href="javascript:void();"><i class="zmdi zmdi-tag-more"></i> <span>tag-more</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1db" data-name="tag">
              <a href="javascript:void();"><i class="zmdi zmdi-tag"></i> <span>tag</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1dc" data-name="thumb-down">
              <a href="javascript:void();"><i class="zmdi zmdi-thumb-down"></i> <span>thumb-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1dd" data-name="thumb-up-down">
              <a href="javascript:void();"><i class="zmdi zmdi-thumb-up-down"></i> <span>thumb-up-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1de" data-name="thumb-up">
              <a href="javascript:void();"><i class="zmdi zmdi-thumb-up"></i> <span>thumb-up</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1df" data-name="ticket-star">
              <a href="javascript:void();"><i class="zmdi zmdi-ticket-star"></i> <span>ticket-star</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e0" data-name="toll">
              <a href="javascript:void();"><i class="zmdi zmdi-toll"></i> <span>toll</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e1" data-name="toys">
              <a href="javascript:void();"><i class="zmdi zmdi-toys"></i> <span>toys</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e2" data-name="traffic">
              <a href="javascript:void();"><i class="zmdi zmdi-traffic"></i> <span>traffic</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e3" data-name="translate">
              <a href="javascript:void();"><i class="zmdi zmdi-translate"></i> <span>translate</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e4" data-name="triangle-down">
              <a href="javascript:void();"><i class="zmdi zmdi-triangle-down"></i> <span>triangle-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e5" data-name="triangle-up">
              <a href="javascript:void();"><i class="zmdi zmdi-triangle-up"></i> <span>triangle-up</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e6" data-name="truck">
              <a href="javascript:void();"><i class="zmdi zmdi-truck"></i> <span>truck</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e7" data-name="turning-sign">
              <a href="javascript:void();"><i class="zmdi zmdi-turning-sign"></i> <span>turning-sign</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ed" data-name="ungroup">
              <a href="javascript:void();"><i class="zmdi zmdi-ungroup"></i> <span>ungroup</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e8" data-name="wallpaper">
              <a href="javascript:void();"><i class="zmdi zmdi-wallpaper"></i> <span>wallpaper</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1e9" data-name="washing-machine">
              <a href="javascript:void();"><i class="zmdi zmdi-washing-machine"></i> <span>washing-machine</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ea" data-name="window-maximize">
              <a href="javascript:void();"><i class="zmdi zmdi-window-maximize"></i> <span>window-maximize</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1eb" data-name="window-minimize">
              <a href="javascript:void();"><i class="zmdi zmdi-window-minimize"></i> <span>window-minimize</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ec" data-name="window-restore">
              <a href="javascript:void();"><i class="zmdi zmdi-window-restore"></i> <span>window-restore</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ed" data-name="wrench">
              <a href="javascript:void();"><i class="zmdi zmdi-wrench"></i> <span>wrench</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ee" data-name="zoom-in">
              <a href="javascript:void();"><i class="zmdi zmdi-zoom-in"></i> <span>zoom-in</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1ef" data-name="zoom-out">
              <a href="javascript:void();"><i class="zmdi zmdi-zoom-out"></i> <span>zoom-out</span></a>
            </div>
          </div>
          <h3>Notifications</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f1f0" data-name="alert-circle-o">
              <a href="javascript:void();"><i class="zmdi zmdi-alert-circle-o"></i> <span>alert-circle-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f1" data-name="alert-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-alert-circle"></i> <span>alert-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f2" data-name="alert-octagon">
              <a href="javascript:void();"><i class="zmdi zmdi-alert-octagon"></i> <span>alert-octagon</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f3" data-name="alert-polygon">
              <a href="javascript:void();"><i class="zmdi zmdi-alert-polygon"></i> <span>alert-polygon</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f4" data-name="alert-triangle">
              <a href="javascript:void();"><i class="zmdi zmdi-alert-triangle"></i> <span>alert-triangle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f5" data-name="help-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-help-outline"></i> <span>help-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f6" data-name="help">
              <a href="javascript:void();"><i class="zmdi zmdi-help"></i> <span>help</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f7" data-name="info-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-info-outline"></i> <span>info-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f8" data-name="info">
              <a href="javascript:void();"><i class="zmdi zmdi-info"></i> <span>info</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1f9" data-name="notifications-active">
              <a href="javascript:void();"><i class="zmdi zmdi-notifications-active"></i> <span>notifications-active</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1fa" data-name="notifications-add">
              <a href="javascript:void();"><i class="zmdi zmdi-notifications-add"></i> <span>notifications-add</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1fb" data-name="notifications-none">
              <a href="javascript:void();"><i class="zmdi zmdi-notifications-none"></i> <span>notifications-none</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1fc" data-name="notifications-off">
              <a href="javascript:void();"><i class="zmdi zmdi-notifications-off"></i> <span>notifications-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1fd" data-name="notifications-paused">
              <a href="javascript:void();"><i class="zmdi zmdi-notifications-paused"></i> <span>notifications-paused</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f1fe" data-name="notifications">
              <a href="javascript:void();"><i class="zmdi zmdi-notifications"></i> <span>notifications</span></a>
            </div>
          </div>
          <h3>Person</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f1ff" data-name="account-add">
              <a href="javascript:void();"><i class="zmdi zmdi-account-add"></i> <span>account-add</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f200" data-name="account-box-mail">
              <a href="javascript:void();"><i class="zmdi zmdi-account-box-mail"></i> <span>account-box-mail</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f201" data-name="account-box-o">
              <a href="javascript:void();"><i class="zmdi zmdi-account-box-o"></i> <span>account-box-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f202" data-name="account-box-phone">
              <a href="javascript:void();"><i class="zmdi zmdi-account-box-phone"></i> <span>account-box-phone</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f203" data-name="account-box">
              <a href="javascript:void();"><i class="zmdi zmdi-account-box"></i> <span>account-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f204" data-name="account-calendar">
              <a href="javascript:void();"><i class="zmdi zmdi-account-calendar"></i> <span>account-calendar</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f205" data-name="account-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-account-circle"></i> <span>account-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f206" data-name="account-o">
              <a href="javascript:void();"><i class="zmdi zmdi-account-o"></i> <span>account-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f207" data-name="account">
              <a href="javascript:void();"><i class="zmdi zmdi-account"></i> <span>account</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f208" data-name="accounts-add">
              <a href="javascript:void();"><i class="zmdi zmdi-accounts-add"></i> <span>accounts-add</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f209" data-name="accounts-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-accounts-alt"></i> <span>accounts-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f20a" data-name="accounts-list-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-accounts-list-alt"></i> <span>accounts-list-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f20b" data-name="accounts-list">
              <a href="javascript:void();"><i class="zmdi zmdi-accounts-list"></i> <span>accounts-list</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f20c" data-name="accounts-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-accounts-outline"></i> <span>accounts-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f20d" data-name="accounts">
              <a href="javascript:void();"><i class="zmdi zmdi-accounts"></i> <span>accounts</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f20e" data-name="face">
              <a href="javascript:void();"><i class="zmdi zmdi-face"></i> <span>face</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f20f" data-name="female">
              <a href="javascript:void();"><i class="zmdi zmdi-female"></i> <span>female</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f210" data-name="male-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-male-alt"></i> <span>male-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f211" data-name="male-female">
              <a href="javascript:void();"><i class="zmdi zmdi-male-female"></i> <span>male-female</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f212" data-name="male">
              <a href="javascript:void();"><i class="zmdi zmdi-male"></i> <span>male</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f213" data-name="mood-bad">
              <a href="javascript:void();"><i class="zmdi zmdi-mood-bad"></i> <span>mood-bad</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f214" data-name="mood">
              <a href="javascript:void();"><i class="zmdi zmdi-mood"></i> <span>mood</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f215" data-name="run">
              <a href="javascript:void();"><i class="zmdi zmdi-run"></i> <span>run</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f216" data-name="walk">
              <a href="javascript:void();"><i class="zmdi zmdi-walk"></i> <span>walk</span></a>
            </div>
          </div>
          <h3>Editor</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f22b" data-name="border-all">
              <a href="javascript:void();"><i class="zmdi zmdi-border-all"></i> <span>border-all</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f22c" data-name="border-bottom">
              <a href="javascript:void();"><i class="zmdi zmdi-border-bottom"></i> <span>border-bottom</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f22d" data-name="border-clear">
              <a href="javascript:void();"><i class="zmdi zmdi-border-clear"></i> <span>border-clear</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f22e" data-name="border-color">
              <a href="javascript:void();"><i class="zmdi zmdi-border-color"></i> <span>border-color</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f22f" data-name="border-horizontal">
              <a href="javascript:void();"><i class="zmdi zmdi-border-horizontal"></i> <span>border-horizontal</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f230" data-name="border-inner">
              <a href="javascript:void();"><i class="zmdi zmdi-border-inner"></i> <span>border-inner</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f231" data-name="border-left">
              <a href="javascript:void();"><i class="zmdi zmdi-border-left"></i> <span>border-left</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f232" data-name="border-outer">
              <a href="javascript:void();"><i class="zmdi zmdi-border-outer"></i> <span>border-outer</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f233" data-name="border-right">
              <a href="javascript:void();"><i class="zmdi zmdi-border-right"></i> <span>border-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f234" data-name="border-style">
              <a href="javascript:void();"><i class="zmdi zmdi-border-style"></i> <span>border-style</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f235" data-name="border-top">
              <a href="javascript:void();"><i class="zmdi zmdi-border-top"></i> <span>border-top</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f236" data-name="border-vertical">
              <a href="javascript:void();"><i class="zmdi zmdi-border-vertical"></i> <span>border-vertical</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f237" data-name="copy">
              <a href="javascript:void();"><i class="zmdi zmdi-copy"></i> <span>copy</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f238" data-name="crop">
              <a href="javascript:void();"><i class="zmdi zmdi-crop"></i> <span>crop</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f239" data-name="format-align-center">
              <a href="javascript:void();"><i class="zmdi zmdi-format-align-center"></i> <span>format-align-center</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f23a" data-name="format-align-justify">
              <a href="javascript:void();"><i class="zmdi zmdi-format-align-justify"></i> <span>format-align-justify</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f23b" data-name="format-align-left">
              <a href="javascript:void();"><i class="zmdi zmdi-format-align-left"></i> <span>format-align-left</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f23c" data-name="format-align-right">
              <a href="javascript:void();"><i class="zmdi zmdi-format-align-right"></i> <span>format-align-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f23d" data-name="format-bold">
              <a href="javascript:void();"><i class="zmdi zmdi-format-bold"></i> <span>format-bold</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f23e" data-name="format-clear-all">
              <a href="javascript:void();"><i class="zmdi zmdi-format-clear-all"></i> <span>format-clear-all</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f23f" data-name="format-clear">
              <a href="javascript:void();"><i class="zmdi zmdi-format-clear"></i> <span>format-clear</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f240" data-name="format-color-fill">
              <a href="javascript:void();"><i class="zmdi zmdi-format-color-fill"></i> <span>format-color-fill</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f241" data-name="format-color-reset">
              <a href="javascript:void();"><i class="zmdi zmdi-format-color-reset"></i> <span>format-color-reset</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f242" data-name="format-color-text">
              <a href="javascript:void();"><i class="zmdi zmdi-format-color-text"></i> <span>format-color-text</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f243" data-name="format-indent-decrease">
              <a href="javascript:void();"><i class="zmdi zmdi-format-indent-decrease"></i> <span>format-indent-decrease</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f244" data-name="format-indent-increase">
              <a href="javascript:void();"><i class="zmdi zmdi-format-indent-increase"></i> <span>format-indent-increase</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f245" data-name="format-italic">
              <a href="javascript:void();"><i class="zmdi zmdi-format-italic"></i> <span>format-italic</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f246" data-name="format-line-spacing">
              <a href="javascript:void();"><i class="zmdi zmdi-format-line-spacing"></i> <span>format-line-spacing</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f247" data-name="format-list-bulleted">
              <a href="javascript:void();"><i class="zmdi zmdi-format-list-bulleted"></i> <span>format-list-bulleted</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f248" data-name="format-list-numbered">
              <a href="javascript:void();"><i class="zmdi zmdi-format-list-numbered"></i> <span>format-list-numbered</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f249" data-name="format-ltr">
              <a href="javascript:void();"><i class="zmdi zmdi-format-ltr"></i> <span>format-ltr</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f24a" data-name="format-rtl">
              <a href="javascript:void();"><i class="zmdi zmdi-format-rtl"></i> <span>format-rtl</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f24b" data-name="format-size">
              <a href="javascript:void();"><i class="zmdi zmdi-format-size"></i> <span>format-size</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f24c" data-name="format-strikethrough-s">
              <a href="javascript:void();"><i class="zmdi zmdi-format-strikethrough-s"></i> <span>format-strikethrough-s</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f24d" data-name="format-strikethrough">
              <a href="javascript:void();"><i class="zmdi zmdi-format-strikethrough"></i> <span>format-strikethrough</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f24e" data-name="format-subject">
              <a href="javascript:void();"><i class="zmdi zmdi-format-subject"></i> <span>format-subject</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f24f" data-name="format-underlined">
              <a href="javascript:void();"><i class="zmdi zmdi-format-underlined"></i> <span>format-underlined</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f250" data-name="format-valign-bottom">
              <a href="javascript:void();"><i class="zmdi zmdi-format-valign-bottom"></i> <span>format-valign-bottom</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f251" data-name="format-valign-center">
              <a href="javascript:void();"><i class="zmdi zmdi-format-valign-center"></i> <span>format-valign-center</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f252" data-name="format-valign-top">
              <a href="javascript:void();"><i class="zmdi zmdi-format-valign-top"></i> <span>format-valign-top</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f253" data-name="redo">
              <a href="javascript:void();"><i class="zmdi zmdi-redo"></i> <span>redo</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f254" data-name="select-all">
              <a href="javascript:void();"><i class="zmdi zmdi-select-all"></i> <span>select-all</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f255" data-name="space-bar">
              <a href="javascript:void();"><i class="zmdi zmdi-space-bar"></i> <span>space-bar</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f256" data-name="text-format">
              <a href="javascript:void();"><i class="zmdi zmdi-text-format"></i> <span>text-format</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f257" data-name="transform">
              <a href="javascript:void();"><i class="zmdi zmdi-transform"></i> <span>transform</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f258" data-name="undo">
              <a href="javascript:void();"><i class="zmdi zmdi-undo"></i> <span>undo</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f259" data-name="wrap-text">
              <a href="javascript:void();"><i class="zmdi zmdi-wrap-text"></i> <span>wrap-text</span></a>
            </div>
          </div>
          <h3>Form</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f267" data-name="check-all">
              <a href="javascript:void();"><i class="zmdi zmdi-check-all"></i> <span>check-all</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f268" data-name="check-circle-u">
              <a href="javascript:void();"><i class="zmdi zmdi-check-circle-u"></i> <span>check-circle-u</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f269" data-name="check-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-check-circle"></i> <span>check-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f26a" data-name="check-square">
              <a href="javascript:void();"><i class="zmdi zmdi-check-square"></i> <span>check-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f26b" data-name="check">
              <a href="javascript:void();"><i class="zmdi zmdi-check"></i> <span>check</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f26c" data-name="circle-o">
              <a href="javascript:void();"><i class="zmdi zmdi-circle-o"></i> <span>circle-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f26d" data-name="circle">
              <a href="javascript:void();"><i class="zmdi zmdi-circle"></i> <span>circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f26e" data-name="dot-circle-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-dot-circle-alt"></i> <span>dot-circle-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f26f" data-name="dot-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-dot-circle"></i> <span>dot-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f270" data-name="minus-circle-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-minus-circle-outline"></i> <span>minus-circle-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f271" data-name="minus-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-minus-circle"></i> <span>minus-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f272" data-name="minus-square">
              <a href="javascript:void();"><i class="zmdi zmdi-minus-square"></i> <span>minus-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f273" data-name="minus">
              <a href="javascript:void();"><i class="zmdi zmdi-minus"></i> <span>minus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f274" data-name="plus-circle-o-duplicate">
              <a href="javascript:void();"><i class="zmdi zmdi-plus-circle-o-duplicate"></i> <span>plus-circle-o-duplicate</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f275" data-name="plus-circle-o">
              <a href="javascript:void();"><i class="zmdi zmdi-plus-circle-o"></i> <span>plus-circle-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f276" data-name="plus-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-plus-circle"></i> <span>plus-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f277" data-name="plus-square">
              <a href="javascript:void();"><i class="zmdi zmdi-plus-square"></i> <span>plus-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f278" data-name="plus">
              <a href="javascript:void();"><i class="zmdi zmdi-plus"></i> <span>plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f279" data-name="square-o">
              <a href="javascript:void();"><i class="zmdi zmdi-square-o"></i> <span>square-o</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f27a" data-name="star-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-star-circle"></i> <span>star-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f27b" data-name="star-half">
              <a href="javascript:void();"><i class="zmdi zmdi-star-half"></i> <span>star-half</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f27c" data-name="star-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-star-outline"></i> <span>star-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f27d" data-name="star">
              <a href="javascript:void();"><i class="zmdi zmdi-star"></i> <span>star</span></a>
            </div>
          </div>
          <h3>Hardware</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f27e" data-name="bluetooth-connected">
              <a href="javascript:void();"><i class="zmdi zmdi-bluetooth-connected"></i> <span>bluetooth-connected</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f27f" data-name="bluetooth-off">
              <a href="javascript:void();"><i class="zmdi zmdi-bluetooth-off"></i> <span>bluetooth-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f280" data-name="bluetooth-search">
              <a href="javascript:void();"><i class="zmdi zmdi-bluetooth-search"></i> <span>bluetooth-search</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f281" data-name="bluetooth-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-bluetooth-setting"></i> <span>bluetooth-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f282" data-name="bluetooth">
              <a href="javascript:void();"><i class="zmdi zmdi-bluetooth"></i> <span>bluetooth</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f283" data-name="camera-add">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-add"></i> <span>camera-add</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f284" data-name="camera-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-alt"></i> <span>camera-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f285" data-name="camera-bw">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-bw"></i> <span>camera-bw</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f286" data-name="camera-front">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-front"></i> <span>camera-front</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f287" data-name="camera-mic">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-mic"></i> <span>camera-mic</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f288" data-name="camera-party-mode">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-party-mode"></i> <span>camera-party-mode</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f289" data-name="camera-rear">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-rear"></i> <span>camera-rear</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f28a" data-name="camera-roll">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-roll"></i> <span>camera-roll</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f28b" data-name="camera-switch">
              <a href="javascript:void();"><i class="zmdi zmdi-camera-switch"></i> <span>camera-switch</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f28c" data-name="camera">
              <a href="javascript:void();"><i class="zmdi zmdi-camera"></i> <span>camera</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f28d" data-name="card-alert">
              <a href="javascript:void();"><i class="zmdi zmdi-card-alert"></i> <span>card-alert</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f28e" data-name="card-off">
              <a href="javascript:void();"><i class="zmdi zmdi-card-off"></i> <span>card-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f28f" data-name="card-sd">
              <a href="javascript:void();"><i class="zmdi zmdi-card-sd"></i> <span>card-sd</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f290" data-name="card-sim">
              <a href="javascript:void();"><i class="zmdi zmdi-card-sim"></i> <span>card-sim</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f291" data-name="desktop-mac">
              <a href="javascript:void();"><i class="zmdi zmdi-desktop-mac"></i> <span>desktop-mac</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f292" data-name="desktop-windows">
              <a href="javascript:void();"><i class="zmdi zmdi-desktop-windows"></i> <span>desktop-windows</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f293" data-name="device-hub">
              <a href="javascript:void();"><i class="zmdi zmdi-device-hub"></i> <span>device-hub</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f294" data-name="devices-off">
              <a href="javascript:void();"><i class="zmdi zmdi-devices-off"></i> <span>devices-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f295" data-name="devices">
              <a href="javascript:void();"><i class="zmdi zmdi-devices"></i> <span>devices</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f296" data-name="dock">
              <a href="javascript:void();"><i class="zmdi zmdi-dock"></i> <span>dock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f297" data-name="floppy">
              <a href="javascript:void();"><i class="zmdi zmdi-floppy"></i> <span>floppy</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f298" data-name="gamepad">
              <a href="javascript:void();"><i class="zmdi zmdi-gamepad"></i> <span>gamepad</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f299" data-name="gps-dot">
              <a href="javascript:void();"><i class="zmdi zmdi-gps-dot"></i> <span>gps-dot</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f29a" data-name="gps-off">
              <a href="javascript:void();"><i class="zmdi zmdi-gps-off"></i> <span>gps-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f29b" data-name="gps">
              <a href="javascript:void();"><i class="zmdi zmdi-gps"></i> <span>gps</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f29c" data-name="headset-mic">
              <a href="javascript:void();"><i class="zmdi zmdi-headset-mic"></i> <span>headset-mic</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f29d" data-name="headset">
              <a href="javascript:void();"><i class="zmdi zmdi-headset"></i> <span>headset</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f29e" data-name="input-antenna">
              <a href="javascript:void();"><i class="zmdi zmdi-input-antenna"></i> <span>input-antenna</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f29f" data-name="input-composite">
              <a href="javascript:void();"><i class="zmdi zmdi-input-composite"></i> <span>input-composite</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a0" data-name="input-hdmi">
              <a href="javascript:void();"><i class="zmdi zmdi-input-hdmi"></i> <span>input-hdmi</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a1" data-name="input-power">
              <a href="javascript:void();"><i class="zmdi zmdi-input-power"></i> <span>input-power</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a2" data-name="input-svideo">
              <a href="javascript:void();"><i class="zmdi zmdi-input-svideo"></i> <span>input-svideo</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a3" data-name="keyboard-hide">
              <a href="javascript:void();"><i class="zmdi zmdi-keyboard-hide"></i> <span>keyboard-hide</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a4" data-name="keyboard">
              <a href="javascript:void();"><i class="zmdi zmdi-keyboard"></i> <span>keyboard</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a5" data-name="laptop-chromebook">
              <a href="javascript:void();"><i class="zmdi zmdi-laptop-chromebook"></i> <span>laptop-chromebook</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a6" data-name="laptop-mac">
              <a href="javascript:void();"><i class="zmdi zmdi-laptop-mac"></i> <span>laptop-mac</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a7" data-name="laptop">
              <a href="javascript:void();"><i class="zmdi zmdi-laptop"></i> <span>laptop</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a8" data-name="mic-off">
              <a href="javascript:void();"><i class="zmdi zmdi-mic-off"></i> <span>mic-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2a9" data-name="mic-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-mic-outline"></i> <span>mic-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2aa" data-name="mic-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-mic-setting"></i> <span>mic-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ab" data-name="mic">
              <a href="javascript:void();"><i class="zmdi zmdi-mic"></i> <span>mic</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ac" data-name="mouse">
              <a href="javascript:void();"><i class="zmdi zmdi-mouse"></i> <span>mouse</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ad" data-name="network-alert">
              <a href="javascript:void();"><i class="zmdi zmdi-network-alert"></i> <span>network-alert</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ae" data-name="network-locked">
              <a href="javascript:void();"><i class="zmdi zmdi-network-locked"></i> <span>network-locked</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2af" data-name="network-off">
              <a href="javascript:void();"><i class="zmdi zmdi-network-off"></i> <span>network-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b0" data-name="network-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-network-outline"></i> <span>network-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b1" data-name="network-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-network-setting"></i> <span>network-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b2" data-name="network">
              <a href="javascript:void();"><i class="zmdi zmdi-network"></i> <span>network</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b3" data-name="phone-bluetooth">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-bluetooth"></i> <span>phone-bluetooth</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b4" data-name="phone-end">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-end"></i> <span>phone-end</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b5" data-name="phone-forwarded">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-forwarded"></i> <span>phone-forwarded</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b6" data-name="phone-in-talk">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-in-talk"></i> <span>phone-in-talk</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b7" data-name="phone-locked">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-locked"></i> <span>phone-locked</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b8" data-name="phone-missed">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-missed"></i> <span>phone-missed</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2b9" data-name="phone-msg">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-msg"></i> <span>phone-msg</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ba" data-name="phone-paused">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-paused"></i> <span>phone-paused</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2bb" data-name="phone-ring">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-ring"></i> <span>phone-ring</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2bc" data-name="phone-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-setting"></i> <span>phone-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2bd" data-name="phone-sip">
              <a href="javascript:void();"><i class="zmdi zmdi-phone-sip"></i> <span>phone-sip</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2be" data-name="phone">
              <a href="javascript:void();"><i class="zmdi zmdi-phone"></i> <span>phone</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2bf" data-name="portable-wifi-changes">
              <a href="javascript:void();"><i class="zmdi zmdi-portable-wifi-changes"></i> <span>portable-wifi-changes</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c0" data-name="portable-wifi-off">
              <a href="javascript:void();"><i class="zmdi zmdi-portable-wifi-off"></i> <span>portable-wifi-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c1" data-name="portable-wifi">
              <a href="javascript:void();"><i class="zmdi zmdi-portable-wifi"></i> <span>portable-wifi</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c2" data-name="radio">
              <a href="javascript:void();"><i class="zmdi zmdi-radio"></i> <span>radio</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c3" data-name="reader">
              <a href="javascript:void();"><i class="zmdi zmdi-reader"></i> <span>reader</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c4" data-name="remote-control-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-remote-control-alt"></i> <span>remote-control-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c5" data-name="remote-control">
              <a href="javascript:void();"><i class="zmdi zmdi-remote-control"></i> <span>remote-control</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c6" data-name="router">
              <a href="javascript:void();"><i class="zmdi zmdi-router"></i> <span>router</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c7" data-name="scanner">
              <a href="javascript:void();"><i class="zmdi zmdi-scanner"></i> <span>scanner</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c8" data-name="smartphone-android">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-android"></i> <span>smartphone-android</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2c9" data-name="smartphone-download">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-download"></i> <span>smartphone-download</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ca" data-name="smartphone-erase">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-erase"></i> <span>smartphone-erase</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2cb" data-name="smartphone-info">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-info"></i> <span>smartphone-info</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2cc" data-name="smartphone-iphone">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-iphone"></i> <span>smartphone-iphone</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2cd" data-name="smartphone-landscape-lock">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-landscape-lock"></i> <span>smartphone-landscape-lock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ce" data-name="smartphone-landscape">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-landscape"></i> <span>smartphone-landscape</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2cf" data-name="smartphone-lock">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-lock"></i> <span>smartphone-lock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d0" data-name="smartphone-portrait-lock">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-portrait-lock"></i> <span>smartphone-portrait-lock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d1" data-name="smartphone-ring">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-ring"></i> <span>smartphone-ring</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d2" data-name="smartphone-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-setting"></i> <span>smartphone-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d3" data-name="smartphone-setup">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone-setup"></i> <span>smartphone-setup</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d4" data-name="smartphone">
              <a href="javascript:void();"><i class="zmdi zmdi-smartphone"></i> <span>smartphone</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d5" data-name="speaker">
              <a href="javascript:void();"><i class="zmdi zmdi-speaker"></i> <span>speaker</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d6" data-name="tablet-android">
              <a href="javascript:void();"><i class="zmdi zmdi-tablet-android"></i> <span>tablet-android</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d7" data-name="tablet-mac">
              <a href="javascript:void();"><i class="zmdi zmdi-tablet-mac"></i> <span>tablet-mac</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d8" data-name="tablet">
              <a href="javascript:void();"><i class="zmdi zmdi-tablet"></i> <span>tablet</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2d9" data-name="tv-alt-play">
              <a href="javascript:void();"><i class="zmdi zmdi-tv-alt-play"></i> <span>tv-alt-play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2da" data-name="tv-list">
              <a href="javascript:void();"><i class="zmdi zmdi-tv-list"></i> <span>tv-list</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2db" data-name="tv-play">
              <a href="javascript:void();"><i class="zmdi zmdi-tv-play"></i> <span>tv-play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2dc" data-name="tv">
              <a href="javascript:void();"><i class="zmdi zmdi-tv"></i> <span>tv</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2dd" data-name="usb">
              <a href="javascript:void();"><i class="zmdi zmdi-usb"></i> <span>usb</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2de" data-name="videocam-off">
              <a href="javascript:void();"><i class="zmdi zmdi-videocam-off"></i> <span>videocam-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2df" data-name="videocam-switch">
              <a href="javascript:void();"><i class="zmdi zmdi-videocam-switch"></i> <span>videocam-switch</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e0" data-name="videocam">
              <a href="javascript:void();"><i class="zmdi zmdi-videocam"></i> <span>videocam</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e1" data-name="watch">
              <a href="javascript:void();"><i class="zmdi zmdi-watch"></i> <span>watch</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e2" data-name="wifi-alt-2">
              <a href="javascript:void();"><i class="zmdi zmdi-wifi-alt-2"></i> <span>wifi-alt-2</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e3" data-name="wifi-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-wifi-alt"></i> <span>wifi-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e4" data-name="wifi-info">
              <a href="javascript:void();"><i class="zmdi zmdi-wifi-info"></i> <span>wifi-info</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e5" data-name="wifi-lock">
              <a href="javascript:void();"><i class="zmdi zmdi-wifi-lock"></i> <span>wifi-lock</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e6" data-name="wifi-off">
              <a href="javascript:void();"><i class="zmdi zmdi-wifi-off"></i> <span>wifi-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e7" data-name="wifi-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-wifi-outline"></i> <span>wifi-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2e8" data-name="wifi">
              <a href="javascript:void();"><i class="zmdi zmdi-wifi"></i> <span>wifi</span></a>
            </div>
          </div>
          <h3>Directional</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f2e9" data-name="arrow-left-bottom">
              <a href="javascript:void();"><i class="zmdi zmdi-arrow-left-bottom"></i> <span>arrow-left-bottom</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ea" data-name="arrow-left">
              <a href="javascript:void();"><i class="zmdi zmdi-arrow-left"></i> <span>arrow-left</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2eb" data-name="arrow-merge">
              <a href="javascript:void();"><i class="zmdi zmdi-arrow-merge"></i> <span>arrow-merge</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ec" data-name="arrow-missed">
              <a href="javascript:void();"><i class="zmdi zmdi-arrow-missed"></i> <span>arrow-missed</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ed" data-name="arrow-right-top">
              <a href="javascript:void();"><i class="zmdi zmdi-arrow-right-top"></i> <span>arrow-right-top</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ee" data-name="arrow-right">
              <a href="javascript:void();"><i class="zmdi zmdi-arrow-right"></i> <span>arrow-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ef" data-name="arrow-split">
              <a href="javascript:void();"><i class="zmdi zmdi-arrow-split"></i> <span>arrow-split</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f0" data-name="arrows">
              <a href="javascript:void();"><i class="zmdi zmdi-arrows"></i> <span>arrows</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f1" data-name="caret-down-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-down-circle"></i> <span>caret-down-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f2" data-name="caret-down">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-down"></i> <span>caret-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f3" data-name="caret-left-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-left-circle"></i> <span>caret-left-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f4" data-name="caret-left">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-left"></i> <span>caret-left</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f5" data-name="caret-right-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-right-circle"></i> <span>caret-right-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f6" data-name="caret-right">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-right"></i> <span>caret-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f7" data-name="caret-up-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-up-circle"></i> <span>caret-up-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f8" data-name="caret-up">
              <a href="javascript:void();"><i class="zmdi zmdi-caret-up"></i> <span>caret-up</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2f9" data-name="chevron-down">
              <a href="javascript:void();"><i class="zmdi zmdi-chevron-down"></i> <span>chevron-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2fa" data-name="chevron-left">
              <a href="javascript:void();"><i class="zmdi zmdi-chevron-left"></i> <span>chevron-left</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2fb" data-name="chevron-right">
              <a href="javascript:void();"><i class="zmdi zmdi-chevron-right"></i> <span>chevron-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2fc" data-name="chevron-up">
              <a href="javascript:void();"><i class="zmdi zmdi-chevron-up"></i> <span>chevron-up</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2fd" data-name="forward">
              <a href="javascript:void();"><i class="zmdi zmdi-forward"></i> <span>forward</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2fe" data-name="long-arrow-down">
              <a href="javascript:void();"><i class="zmdi zmdi-long-arrow-down"></i> <span>long-arrow-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f2ff" data-name="long-arrow-left">
              <a href="javascript:void();"><i class="zmdi zmdi-long-arrow-left"></i> <span>long-arrow-left</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f300" data-name="long-arrow-return">
              <a href="javascript:void();"><i class="zmdi zmdi-long-arrow-return"></i> <span>long-arrow-return</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f301" data-name="long-arrow-right">
              <a href="javascript:void();"><i class="zmdi zmdi-long-arrow-right"></i> <span>long-arrow-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f302" data-name="long-arrow-tab">
              <a href="javascript:void();"><i class="zmdi zmdi-long-arrow-tab"></i> <span>long-arrow-tab</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f303" data-name="long-arrow-up">
              <a href="javascript:void();"><i class="zmdi zmdi-long-arrow-up"></i> <span>long-arrow-up</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f304" data-name="rotate-ccw">
              <a href="javascript:void();"><i class="zmdi zmdi-rotate-ccw"></i> <span>rotate-ccw</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f305" data-name="rotate-cw">
              <a href="javascript:void();"><i class="zmdi zmdi-rotate-cw"></i> <span>rotate-cw</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f306" data-name="rotate-left">
              <a href="javascript:void();"><i class="zmdi zmdi-rotate-left"></i> <span>rotate-left</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f307" data-name="rotate-right">
              <a href="javascript:void();"><i class="zmdi zmdi-rotate-right"></i> <span>rotate-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f308" data-name="square-down">
              <a href="javascript:void();"><i class="zmdi zmdi-square-down"></i> <span>square-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f309" data-name="square-right">
              <a href="javascript:void();"><i class="zmdi zmdi-square-right"></i> <span>square-right</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f30a" data-name="swap-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-swap-alt"></i> <span>swap-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f30b" data-name="swap-vertical-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-swap-vertical-circle"></i> <span>swap-vertical-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f30c" data-name="swap-vertical">
              <a href="javascript:void();"><i class="zmdi zmdi-swap-vertical"></i> <span>swap-vertical</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f30d" data-name="swap">
              <a href="javascript:void();"><i class="zmdi zmdi-swap"></i> <span>swap</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f30e" data-name="trending-down">
              <a href="javascript:void();"><i class="zmdi zmdi-trending-down"></i> <span>trending-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f30f" data-name="trending-flat">
              <a href="javascript:void();"><i class="zmdi zmdi-trending-flat"></i> <span>trending-flat</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f310" data-name="trending-up">
              <a href="javascript:void();"><i class="zmdi zmdi-trending-up"></i> <span>trending-up</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f311" data-name="unfold-less">
              <a href="javascript:void();"><i class="zmdi zmdi-unfold-less"></i> <span>unfold-less</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f312" data-name="unfold-more">
              <a href="javascript:void();"><i class="zmdi zmdi-unfold-more"></i> <span>unfold-more</span></a>
            </div>
          </div>
          <h3>Map (aliases)</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f117" data-name="bike">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-bike"></i> zmdi-directions-bike</a>
            </div>
            <div class="icon col-sm-3" data-code="f11a" data-name="boat">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-boat"></i> zmdi-directions-boat</a>
            </div>
            <div class="icon col-sm-3" data-code="f121" data-name="bus">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-bus"></i> zmdi-directions-bus</a>
            </div>
            <div class="icon col-sm-3" data-code="f125" data-name="car">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-car"></i> zmdi-directions-car</a>
            </div>
            <div class="icon col-sm-3" data-code="f1b3" data-name="railway">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-railway"></i> zmdi-directions-railway</a>
            </div>
            <div class="icon col-sm-3" data-code="f215" data-name="run">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-run"></i> zmdi-directions-run</a>
            </div>
            <div class="icon col-sm-3" data-code="f1d5" data-name="subway">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-subway"></i> zmdi-directions-subway</a>
            </div>
            <div class="icon col-sm-3" data-code="f216" data-name="walk">
              <a href="javascript:void();"><i class="zmdi zmdi-directions-walk"></i> zmdi-directions-walk</a>
            </div>
            <div class="icon col-sm-3" data-code="f1e7" data-name="turning-sign">
              <a href="javascript:void();"><i class="zmdi zmdi-directions"></i> zmdi-directions</a>
            </div>
            <div class="icon col-sm-3" data-code="f18b" data-name="layers-off">
              <a href="javascript:void();"><i class="zmdi zmdi-layers-off"></i> zmdi-layers-off</a>
            </div>
            <div class="icon col-sm-3" data-code="f18c" data-name="layers">
              <a href="javascript:void();"><i class="zmdi zmdi-layers"></i> zmdi-layers</a>
            </div>
            <div class="icon col-sm-3" data-code="f1df" data-name="ticket-star">
              <a href="javascript:void();"><i class="zmdi zmdi-local-activity"></i> zmdi-local-activity</a>
            </div>
            <div class="icon col-sm-3" data-code="f103" data-name="airplane">
              <a href="javascript:void();"><i class="zmdi zmdi-local-airport"></i> zmdi-local-airport</a>
            </div>
            <div class="icon col-sm-3" data-code="f198" data-name="money-box">
              <a href="javascript:void();"><i class="zmdi zmdi-local-atm"></i> zmdi-local-atm</a>
            </div>
            <div class="icon col-sm-3" data-code="f137" data-name="cocktail">
              <a href="javascript:void();"><i class="zmdi zmdi-local-bar"></i> zmdi-local-bar</a>
            </div>
            <div class="icon col-sm-3" data-code="f13b" data-name="coffee">
              <a href="javascript:void();"><i class="zmdi zmdi-local-cafe"></i> zmdi-local-cafe</a>
            </div>
            <div class="icon col-sm-3" data-code="f124" data-name="car-wash">
              <a href="javascript:void();"><i class="zmdi zmdi-local-car-wash"></i> zmdi-local-car-wash</a>
            </div>
            <div class="icon col-sm-3" data-code="f1d3" data-name="store-24">
              <a href="javascript:void();"><i class="zmdi zmdi-local-convenience-store"></i> zmdi-local-convenience-store</a>
            </div>
            <div class="icon col-sm-3" data-code="f153" data-name="cutlery">
              <a href="javascript:void();"><i class="zmdi zmdi-local-dining"></i> zmdi-local-dining</a>
            </div>
            <div class="icon col-sm-3" data-code="f157" data-name="drink">
              <a href="javascript:void();"><i class="zmdi zmdi-local-drink"></i> zmdi-local-drink</a>
            </div>
            <div class="icon col-sm-3" data-code="f168" data-name="flower-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-local-florist"></i> zmdi-local-florist</a>
            </div>
            <div class="icon col-sm-3" data-code="f16f" data-name="gas-station">
              <a href="javascript:void();"><i class="zmdi zmdi-local-gas-station"></i> zmdi-local-gas-station</a>
            </div>
            <div class="icon col-sm-3" data-code="f1cb" data-name="shopping-cart">
              <a href="javascript:void();"><i class="zmdi zmdi-local-grocery-store"></i> zmdi-local-grocery-store</a>
            </div>
            <div class="icon col-sm-3" data-code="f177" data-name="hospital">
              <a href="javascript:void();"><i class="zmdi zmdi-local-hospital"></i> zmdi-local-hospital</a>
            </div>
            <div class="icon col-sm-3" data-code="f178" data-name="hotel">
              <a href="javascript:void();"><i class="zmdi zmdi-local-hotel"></i> zmdi-local-hotel</a>
            </div>
            <div class="icon col-sm-3" data-code="f1e9" data-name="washing-machine">
              <a href="javascript:void();"><i class="zmdi zmdi-local-laundry-service"></i> zmdi-local-laundry-service</a>
            </div>
            <div class="icon col-sm-3" data-code="f18d" data-name="library">
              <a href="javascript:void();"><i class="zmdi zmdi-local-library"></i> zmdi-local-library</a>
            </div>
            <div class="icon col-sm-3" data-code="f195" data-name="mall">
              <a href="javascript:void();"><i class="zmdi zmdi-local-mall"></i> zmdi-local-mall</a>
            </div>
            <div class="icon col-sm-3" data-code="f19d" data-name="movie-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-local-movies"></i> zmdi-local-movies</a>
            </div>
            <div class="icon col-sm-3" data-code="f187" data-name="label">
              <a href="javascript:void();"><i class="zmdi zmdi-local-offer"></i> zmdi-local-offer</a>
            </div>
            <div class="icon col-sm-3" data-code="f1a5" data-name="parking">
              <a href="javascript:void();"><i class="zmdi zmdi-local-parking"></i> zmdi-local-parking</a>
            </div>
            <div class="icon col-sm-3" data-code="f176" data-name="hospital-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-local-pharmacy"></i> zmdi-local-pharmacy</a>
            </div>
            <div class="icon col-sm-3" data-code="f2be" data-name="phone">
              <a href="javascript:void();"><i class="zmdi zmdi-local-phone"></i> zmdi-local-phone</a>
            </div>
            <div class="icon col-sm-3" data-code="f1ac" data-name="pizza">
              <a href="javascript:void();"><i class="zmdi zmdi-local-pizza"></i> zmdi-local-pizza</a>
            </div>
            <div class="icon col-sm-3" data-code="f1df" data-name="ticket-star">
              <a href="javascript:void();"><i class="zmdi zmdi-local-activity"></i> zmdi-local-activity</a>
            </div>
            <div class="icon col-sm-3" data-code="f15a" data-name="email">
              <a href="javascript:void();"><i class="zmdi zmdi-local-post-office"></i> zmdi-local-post-office</a>
            </div>
            <div class="icon col-sm-3" data-code="f1b0" data-name="print">
              <a href="javascript:void();"><i class="zmdi zmdi-local-printshop"></i> zmdi-local-printshop</a>
            </div>
            <div class="icon col-sm-3" data-code="f28c" data-name="camera">
              <a href="javascript:void();"><i class="zmdi zmdi-local-see"></i> zmdi-local-see</a>
            </div>
            <div class="icon col-sm-3" data-code="f1e6" data-name="truck">
              <a href="javascript:void();"><i class="zmdi zmdi-local-shipping"></i> zmdi-local-shipping</a>
            </div>
            <div class="icon col-sm-3" data-code="f1d4" data-name="store">
              <a href="javascript:void();"><i class="zmdi zmdi-local-store"></i> zmdi-local-store</a>
            </div>
            <div class="icon col-sm-3" data-code="f123" data-name="car-taxi">
              <a href="javascript:void();"><i class="zmdi zmdi-local-taxi"></i> zmdi-local-taxi</a>
            </div>
            <div class="icon col-sm-3" data-code="f211" data-name="male-female">
              <a href="javascript:void();"><i class="zmdi zmdi-local-wc"></i> zmdi-local-wc</a>
            </div>
            <div class="icon col-sm-3" data-code="f196" data-name="map">
              <a href="javascript:void();"><i class="zmdi zmdi-map"></i> zmdi-map</a>
            </div>
            <div class="icon col-sm-3" data-code="f299" data-name="gps-dot">
              <a href="javascript:void();"><i class="zmdi zmdi-my-location"></i> zmdi-my-location</a>
            </div>
            <div class="icon col-sm-3" data-code="f19f" data-name="nature-people">
              <a href="javascript:void();"><i class="zmdi zmdi-nature-people"></i> zmdi-nature-people</a>
            </div>
            <div class="icon col-sm-3" data-code="f1a0" data-name="nature">
              <a href="javascript:void();"><i class="zmdi zmdi-nature"></i> zmdi-nature</a>
            </div>
            <div class="icon col-sm-3" data-code="f1a1" data-name="navigation">
              <a href="javascript:void();"><i class="zmdi zmdi-navigation"></i> zmdi-navigation</a>
            </div>
            <div class="icon col-sm-3" data-code="f1a6" data-name="pin-account">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-account"></i> zmdi-pin-account</a>
            </div>
            <div class="icon col-sm-3" data-code="f1a7" data-name="pin-assistant">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-assistant"></i> zmdi-pin-assistant</a>
            </div>
            <div class="icon col-sm-3" data-code="f1a8" data-name="pin-drop">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-drop"></i> zmdi-pin-drop</a>
            </div>
            <div class="icon col-sm-3" data-code="f1a9" data-name="pin-help">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-help"></i> zmdi-pin-help</a>
            </div>
            <div class="icon col-sm-3" data-code="f1aa" data-name="pin-off">
              <a href="javascript:void();"><i class="zmdi zmdi-pin-off"></i> zmdi-pin-off</a>
            </div>
            <div class="icon col-sm-3" data-code="f1ab" data-name="pin">
              <a href="javascript:void();"><i class="zmdi zmdi-pin"></i> zmdi-pin</a>
            </div>
            <div class="icon col-sm-3" data-code="f1e2" data-name="traffic">
              <a href="javascript:void();"><i class="zmdi zmdi-traffic"></i> zmdi-traffic</a>
            </div>
          </div>
          <h3>View</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f313" data-name="apps">
              <a href="javascript:void();"><i class="zmdi zmdi-apps"></i> <span>apps</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f314" data-name="grid-off">
              <a href="javascript:void();"><i class="zmdi zmdi-grid-off"></i> <span>grid-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f315" data-name="grid">
              <a href="javascript:void();"><i class="zmdi zmdi-grid"></i> <span>grid</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f316" data-name="view-agenda">
              <a href="javascript:void();"><i class="zmdi zmdi-view-agenda"></i> <span>view-agenda</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f317" data-name="view-array">
              <a href="javascript:void();"><i class="zmdi zmdi-view-array"></i> <span>view-array</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f318" data-name="view-carousel">
              <a href="javascript:void();"><i class="zmdi zmdi-view-carousel"></i> <span>view-carousel</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f319" data-name="view-column">
              <a href="javascript:void();"><i class="zmdi zmdi-view-column"></i> <span>view-column</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f31a" data-name="view-comfy">
              <a href="javascript:void();"><i class="zmdi zmdi-view-comfy"></i> <span>view-comfy</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f31b" data-name="view-compact">
              <a href="javascript:void();"><i class="zmdi zmdi-view-compact"></i> <span>view-compact</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f31c" data-name="view-dashboard">
              <a href="javascript:void();"><i class="zmdi zmdi-view-dashboard"></i> <span>view-dashboard</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f31d" data-name="view-day">
              <a href="javascript:void();"><i class="zmdi zmdi-view-day"></i> <span>view-day</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f31e" data-name="view-headline">
              <a href="javascript:void();"><i class="zmdi zmdi-view-headline"></i> <span>view-headline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f31f" data-name="view-list-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-view-list-alt"></i> <span>view-list-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f320" data-name="view-list">
              <a href="javascript:void();"><i class="zmdi zmdi-view-list"></i> <span>view-list</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f321" data-name="view-module">
              <a href="javascript:void();"><i class="zmdi zmdi-view-module"></i> <span>view-module</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f322" data-name="view-quilt">
              <a href="javascript:void();"><i class="zmdi zmdi-view-quilt"></i> <span>view-quilt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f323" data-name="view-stream">
              <a href="javascript:void();"><i class="zmdi zmdi-view-stream"></i> <span>view-stream</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f324" data-name="view-subtitles">
              <a href="javascript:void();"><i class="zmdi zmdi-view-subtitles"></i> <span>view-subtitles</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f325" data-name="view-toc">
              <a href="javascript:void();"><i class="zmdi zmdi-view-toc"></i> <span>view-toc</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f326" data-name="view-web">
              <a href="javascript:void();"><i class="zmdi zmdi-view-web"></i> <span>view-web</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f327" data-name="view-week">
              <a href="javascript:void();"><i class="zmdi zmdi-view-week"></i> <span>view-week</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f328" data-name="widgets">
              <a href="javascript:void();"><i class="zmdi zmdi-widgets"></i> <span>widgets</span></a>
            </div>
          </div>
          <h3>Date / Time</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f329" data-name="alarm-check">
              <a href="javascript:void();"><i class="zmdi zmdi-alarm-check"></i> <span>alarm-check</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f32a" data-name="alarm-off">
              <a href="javascript:void();"><i class="zmdi zmdi-alarm-off"></i> <span>alarm-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f32b" data-name="alarm-plus">
              <a href="javascript:void();"><i class="zmdi zmdi-alarm-plus"></i> <span>alarm-plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f32c" data-name="alarm-snooze">
              <a href="javascript:void();"><i class="zmdi zmdi-alarm-snooze"></i> <span>alarm-snooze</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f32d" data-name="alarm">
              <a href="javascript:void();"><i class="zmdi zmdi-alarm"></i> <span>alarm</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f32e" data-name="calendar-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-calendar-alt"></i> <span>calendar-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f32f" data-name="calendar-check">
              <a href="javascript:void();"><i class="zmdi zmdi-calendar-check"></i> <span>calendar-check</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f330" data-name="calendar-close">
              <a href="javascript:void();"><i class="zmdi zmdi-calendar-close"></i> <span>calendar-close</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f331" data-name="calendar-note">
              <a href="javascript:void();"><i class="zmdi zmdi-calendar-note"></i> <span>calendar-note</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f332" data-name="calendar">
              <a href="javascript:void();"><i class="zmdi zmdi-calendar"></i> <span>calendar</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f333" data-name="time-countdown">
              <a href="javascript:void();"><i class="zmdi zmdi-time-countdown"></i> <span>time-countdown</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f334" data-name="time-interval">
              <a href="javascript:void();"><i class="zmdi zmdi-time-interval"></i> <span>time-interval</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f335" data-name="time-restore-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-time-restore-setting"></i> <span>time-restore-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f336" data-name="time-restore">
              <a href="javascript:void();"><i class="zmdi zmdi-time-restore"></i> <span>time-restore</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f337" data-name="time">
              <a href="javascript:void();"><i class="zmdi zmdi-time"></i> <span>time</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f338" data-name="timer-off">
              <a href="javascript:void();"><i class="zmdi zmdi-timer-off"></i> <span>timer-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f339" data-name="timer">
              <a href="javascript:void();"><i class="zmdi zmdi-timer"></i> <span>timer</span></a>
            </div>
          </div>
          <h3>Social</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f33a" data-name="android-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-android-alt"></i> <span>android-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f33b" data-name="android">
              <a href="javascript:void();"><i class="zmdi zmdi-android"></i> <span>android</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f33c" data-name="apple">
              <a href="javascript:void();"><i class="zmdi zmdi-apple"></i> <span>apple</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f33d" data-name="behance">
              <a href="javascript:void();"><i class="zmdi zmdi-behance"></i> <span>behance</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f33e" data-name="codepen">
              <a href="javascript:void();"><i class="zmdi zmdi-codepen"></i> <span>codepen</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f33f" data-name="dribbble">
              <a href="javascript:void();"><i class="zmdi zmdi-dribbble"></i> <span>dribbble</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f340" data-name="dropbox">
              <a href="javascript:void();"><i class="zmdi zmdi-dropbox"></i> <span>dropbox</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f341" data-name="evernote">
              <a href="javascript:void();"><i class="zmdi zmdi-evernote"></i> <span>evernote</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f342" data-name="facebook-box">
              <a href="javascript:void();"><i class="zmdi zmdi-facebook-box"></i> <span>facebook-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f343" data-name="facebook">
              <a href="javascript:void();"><i class="zmdi zmdi-facebook"></i> <span>facebook</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f344" data-name="github-box">
              <a href="javascript:void();"><i class="zmdi zmdi-github-box"></i> <span>github-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f345" data-name="github">
              <a href="javascript:void();"><i class="zmdi zmdi-github"></i> <span>github</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f346" data-name="google-drive">
              <a href="javascript:void();"><i class="zmdi zmdi-google-drive"></i> <span>google-drive</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f347" data-name="google-earth">
              <a href="javascript:void();"><i class="zmdi zmdi-google-earth"></i> <span>google-earth</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f348" data-name="google-glass">
              <a href="javascript:void();"><i class="zmdi zmdi-google-glass"></i> <span>google-glass</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f349" data-name="google-maps">
              <a href="javascript:void();"><i class="zmdi zmdi-google-maps"></i> <span>google-maps</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34a" data-name="google-pages">
              <a href="javascript:void();"><i class="zmdi zmdi-google-pages"></i> <span>google-pages</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34b" data-name="google-play">
              <a href="javascript:void();"><i class="zmdi zmdi-google-play"></i> <span>google-play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34c" data-name="google-plus-box">
              <a href="javascript:void();"><i class="zmdi zmdi-google-plus-box"></i> <span>google-plus-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34d" data-name="google-plus">
              <a href="javascript:void();"><i class="zmdi zmdi-google-plus"></i> <span>google-plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34e" data-name="google">
              <a href="javascript:void();"><i class="zmdi zmdi-google"></i> <span>google</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f34f" data-name="instagram">
              <a href="javascript:void();"><i class="zmdi zmdi-instagram"></i> <span>instagram</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f350" data-name="language-css3">
              <a href="javascript:void();"><i class="zmdi zmdi-language-css3"></i> <span>language-css3</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f351" data-name="language-html5">
              <a href="javascript:void();"><i class="zmdi zmdi-language-html5"></i> <span>language-html5</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f352" data-name="language-javascript">
              <a href="javascript:void();"><i class="zmdi zmdi-language-javascript"></i> <span>language-javascript</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f353" data-name="language-python-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-language-python-alt"></i> <span>language-python-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f354" data-name="language-python">
              <a href="javascript:void();"><i class="zmdi zmdi-language-python"></i> <span>language-python</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f355" data-name="lastfm">
              <a href="javascript:void();"><i class="zmdi zmdi-lastfm"></i> <span>lastfm</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f356" data-name="linkedin-box">
              <a href="javascript:void();"><i class="zmdi zmdi-linkedin-box"></i> <span>linkedin-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f357" data-name="paypal">
              <a href="javascript:void();"><i class="zmdi zmdi-paypal"></i> <span>paypal</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f358" data-name="pinterest-box">
              <a href="javascript:void();"><i class="zmdi zmdi-pinterest-box"></i> <span>pinterest-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f359" data-name="pocket">
              <a href="javascript:void();"><i class="zmdi zmdi-pocket"></i> <span>pocket</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f35a" data-name="polymer">
              <a href="javascript:void();"><i class="zmdi zmdi-polymer"></i> <span>polymer</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ea" data-name="rss">
              <a href="javascript:void();"><i class="zmdi zmdi-rss"></i> <span>rss</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f35b" data-name="share">
              <a href="javascript:void();"><i class="zmdi zmdi-share"></i> <span>share</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f35c" data-name="stackoverflow">
              <a href="javascript:void();"><i class="zmdi zmdi-stackoverflow"></i> <span>stackoverflow</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f35d" data-name="steam-square">
              <a href="javascript:void();"><i class="zmdi zmdi-steam-square"></i> <span>steam-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f35e" data-name="steam">
              <a href="javascript:void();"><i class="zmdi zmdi-steam"></i> <span>steam</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f35f" data-name="twitter-box">
              <a href="javascript:void();"><i class="zmdi zmdi-twitter-box"></i> <span>twitter-box</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f360" data-name="twitter">
              <a href="javascript:void();"><i class="zmdi zmdi-twitter"></i> <span>twitter</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f361" data-name="vk">
              <a href="javascript:void();"><i class="zmdi zmdi-vk"></i> <span>vk</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f362" data-name="wikipedia">
              <a href="javascript:void();"><i class="zmdi zmdi-wikipedia"></i> <span>wikipedia</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f363" data-name="windows">
              <a href="javascript:void();"><i class="zmdi zmdi-windows"></i> <span>windows</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ee" data-name="500px">
              <a href="javascript:void();"><i class="zmdi zmdi-500px"></i> <span>500px</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ef" data-name="8tracks">
              <a href="javascript:void();"><i class="zmdi zmdi-8tracks"></i> <span>8tracks</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f0" data-name="amazon">
              <a href="javascript:void();"><i class="zmdi zmdi-amazon"></i> <span>amazon</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f1" data-name="blogger">
              <a href="javascript:void();"><i class="zmdi zmdi-blogger"></i> <span>blogger</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f2" data-name="delicious">
              <a href="javascript:void();"><i class="zmdi zmdi-delicious"></i> <span>delicious</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f3" data-name="disqus">
              <a href="javascript:void();"><i class="zmdi zmdi-disqus"></i> <span>disqus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f4" data-name="flattr">
              <a href="javascript:void();"><i class="zmdi zmdi-flattr"></i> <span>flattr</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f5" data-name="flickr">
              <a href="javascript:void();"><i class="zmdi zmdi-flickr"></i> <span>flickr</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f6" data-name="github-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-github-alt"></i> <span>github-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f7" data-name="google-old">
              <a href="javascript:void();"><i class="zmdi zmdi-google-old"></i> <span>google-old</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f8" data-name="linkedin">
              <a href="javascript:void();"><i class="zmdi zmdi-linkedin"></i> <span>linkedin</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3f9" data-name="odnoklassniki">
              <a href="javascript:void();"><i class="zmdi zmdi-odnoklassniki"></i> <span>odnoklassniki</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3fa" data-name="outlook">
              <a href="javascript:void();"><i class="zmdi zmdi-outlook"></i> <span>outlook</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3fb" data-name="paypal-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-paypal-alt"></i> <span>paypal-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3fc" data-name="pinterest">
              <a href="javascript:void();"><i class="zmdi zmdi-pinterest"></i> <span>pinterest</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3fd" data-name="playstation">
              <a href="javascript:void();"><i class="zmdi zmdi-playstation"></i> <span>playstation</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3fe" data-name="reddit">
              <a href="javascript:void();"><i class="zmdi zmdi-reddit"></i> <span>reddit</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ff" data-name="skype">
              <a href="javascript:void();"><i class="zmdi zmdi-skype"></i> <span>skype</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f400" data-name="slideshare">
              <a href="javascript:void();"><i class="zmdi zmdi-slideshare"></i> <span>slideshare</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f401" data-name="soundcloud">
              <a href="javascript:void();"><i class="zmdi zmdi-soundcloud"></i> <span>soundcloud</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f402" data-name="tumblr">
              <a href="javascript:void();"><i class="zmdi zmdi-tumblr"></i> <span>tumblr</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f403" data-name="twitch">
              <a href="javascript:void();"><i class="zmdi zmdi-twitch"></i> <span>twitch</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f404" data-name="vimeo">
              <a href="javascript:void();"><i class="zmdi zmdi-vimeo"></i> <span>vimeo</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f405" data-name="whatsapp">
              <a href="javascript:void();"><i class="zmdi zmdi-whatsapp"></i> <span>whatsapp</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f406" data-name="xbox">
              <a href="javascript:void();"><i class="zmdi zmdi-xbox"></i> <span>xbox</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f407" data-name="yahoo">
              <a href="javascript:void();"><i class="zmdi zmdi-yahoo"></i> <span>yahoo</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f408" data-name="youtube-play">
              <a href="javascript:void();"><i class="zmdi zmdi-youtube-play"></i> <span>youtube-play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f409" data-name="youtube">
              <a href="javascript:void();"><i class="zmdi zmdi-youtube"></i> <span>youtube</span></a>
            </div>
          </div>

          <div class="alert alert-warning alert-dismissible" role="alert">
           <button type="button" class="close" data-dismiss="alert">×</button>
            <div class="alert-icon contrast-alert">
           <i class="icon-exclamation"></i>
            </div>
            <div class="alert-message">
              <span><strong>Warning!</strong> Apparently, Adblock Plus can remove social icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please <a href="https://adblockplus.org/en/bugs" target="_blank">report an issue with Adblock Plus</a> if you believe this to be an error. To work around this, you'll need to modify the social icon class names.</span>
            </div>
          </div>

          <h3>Image</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f364" data-name="aspect-ratio-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-aspect-ratio-alt"></i> <span>aspect-ratio-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f365" data-name="aspect-ratio">
              <a href="javascript:void();"><i class="zmdi zmdi-aspect-ratio"></i> <span>aspect-ratio</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f366" data-name="blur-circular">
              <a href="javascript:void();"><i class="zmdi zmdi-blur-circular"></i> <span>blur-circular</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f367" data-name="blur-linear">
              <a href="javascript:void();"><i class="zmdi zmdi-blur-linear"></i> <span>blur-linear</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f368" data-name="blur-off">
              <a href="javascript:void();"><i class="zmdi zmdi-blur-off"></i> <span>blur-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f369" data-name="blur">
              <a href="javascript:void();"><i class="zmdi zmdi-blur"></i> <span>blur</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f36a" data-name="brightness-2">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-2"></i> <span>brightness-2</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f36b" data-name="brightness-3">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-3"></i> <span>brightness-3</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f36c" data-name="brightness-4">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-4"></i> <span>brightness-4</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f36d" data-name="brightness-5">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-5"></i> <span>brightness-5</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f36e" data-name="brightness-6">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-6"></i> <span>brightness-6</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f36f" data-name="brightness-7">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-7"></i> <span>brightness-7</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f370" data-name="brightness-auto">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-auto"></i> <span>brightness-auto</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f371" data-name="brightness-setting">
              <a href="javascript:void();"><i class="zmdi zmdi-brightness-setting"></i> <span>brightness-setting</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f372" data-name="broken-image">
              <a href="javascript:void();"><i class="zmdi zmdi-broken-image"></i> <span>broken-image</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f373" data-name="center-focus-strong">
              <a href="javascript:void();"><i class="zmdi zmdi-center-focus-strong"></i> <span>center-focus-strong</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f374" data-name="center-focus-weak">
              <a href="javascript:void();"><i class="zmdi zmdi-center-focus-weak"></i> <span>center-focus-weak</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f375" data-name="compare">
              <a href="javascript:void();"><i class="zmdi zmdi-compare"></i> <span>compare</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f376" data-name="crop-16-9">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-16-9"></i> <span>crop-16-9</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f377" data-name="crop-3-2">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-3-2"></i> <span>crop-3-2</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f378" data-name="crop-5-4">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-5-4"></i> <span>crop-5-4</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f379" data-name="crop-7-5">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-7-5"></i> <span>crop-7-5</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f37a" data-name="crop-din">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-din"></i> <span>crop-din</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f37b" data-name="crop-free">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-free"></i> <span>crop-free</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f37c" data-name="crop-landscape">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-landscape"></i> <span>crop-landscape</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f37d" data-name="crop-portrait">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-portrait"></i> <span>crop-portrait</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f37e" data-name="crop-square">
              <a href="javascript:void();"><i class="zmdi zmdi-crop-square"></i> <span>crop-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f37f" data-name="exposure-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-exposure-alt"></i> <span>exposure-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f380" data-name="exposure">
              <a href="javascript:void();"><i class="zmdi zmdi-exposure"></i> <span>exposure</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f381" data-name="filter-b-and-w">
              <a href="javascript:void();"><i class="zmdi zmdi-filter-b-and-w"></i> <span>filter-b-and-w</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f382" data-name="filter-center-focus">
              <a href="javascript:void();"><i class="zmdi zmdi-filter-center-focus"></i> <span>filter-center-focus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f383" data-name="filter-frames">
              <a href="javascript:void();"><i class="zmdi zmdi-filter-frames"></i> <span>filter-frames</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f384" data-name="filter-tilt-shift">
              <a href="javascript:void();"><i class="zmdi zmdi-filter-tilt-shift"></i> <span>filter-tilt-shift</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f385" data-name="gradient">
              <a href="javascript:void();"><i class="zmdi zmdi-gradient"></i> <span>gradient</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f386" data-name="grain">
              <a href="javascript:void();"><i class="zmdi zmdi-grain"></i> <span>grain</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f387" data-name="graphic-eq">
              <a href="javascript:void();"><i class="zmdi zmdi-graphic-eq"></i> <span>graphic-eq</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f388" data-name="hdr-off">
              <a href="javascript:void();"><i class="zmdi zmdi-hdr-off"></i> <span>hdr-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f389" data-name="hdr-strong">
              <a href="javascript:void();"><i class="zmdi zmdi-hdr-strong"></i> <span>hdr-strong</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f38a" data-name="hdr-weak">
              <a href="javascript:void();"><i class="zmdi zmdi-hdr-weak"></i> <span>hdr-weak</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f38b" data-name="hdr">
              <a href="javascript:void();"><i class="zmdi zmdi-hdr"></i> <span>hdr</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f38c" data-name="iridescent">
              <a href="javascript:void();"><i class="zmdi zmdi-iridescent"></i> <span>iridescent</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f38d" data-name="leak-off">
              <a href="javascript:void();"><i class="zmdi zmdi-leak-off"></i> <span>leak-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f38e" data-name="leak">
              <a href="javascript:void();"><i class="zmdi zmdi-leak"></i> <span>leak</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f38f" data-name="looks">
              <a href="javascript:void();"><i class="zmdi zmdi-looks"></i> <span>looks</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f390" data-name="loupe">
              <a href="javascript:void();"><i class="zmdi zmdi-loupe"></i> <span>loupe</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f391" data-name="panorama-horizontal">
              <a href="javascript:void();"><i class="zmdi zmdi-panorama-horizontal"></i> <span>panorama-horizontal</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f392" data-name="panorama-vertical">
              <a href="javascript:void();"><i class="zmdi zmdi-panorama-vertical"></i> <span>panorama-vertical</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f393" data-name="panorama-wide-angle">
              <a href="javascript:void();"><i class="zmdi zmdi-panorama-wide-angle"></i> <span>panorama-wide-angle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f394" data-name="photo-size-select-large">
              <a href="javascript:void();"><i class="zmdi zmdi-photo-size-select-large"></i> <span>photo-size-select-large</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f395" data-name="photo-size-select-small">
              <a href="javascript:void();"><i class="zmdi zmdi-photo-size-select-small"></i> <span>photo-size-select-small</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f396" data-name="picture-in-picture">
              <a href="javascript:void();"><i class="zmdi zmdi-picture-in-picture"></i> <span>picture-in-picture</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f397" data-name="slideshow">
              <a href="javascript:void();"><i class="zmdi zmdi-slideshow"></i> <span>slideshow</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f398" data-name="texture">
              <a href="javascript:void();"><i class="zmdi zmdi-texture"></i> <span>texture</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f399" data-name="tonality">
              <a href="javascript:void();"><i class="zmdi zmdi-tonality"></i> <span>tonality</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f39a" data-name="vignette">
              <a href="javascript:void();"><i class="zmdi zmdi-vignette"></i> <span>vignette</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f39b" data-name="wb-auto">
              <a href="javascript:void();"><i class="zmdi zmdi-wb-auto"></i> <span>wb-auto</span></a>
            </div>
          </div>
          <h3>Audio / Video</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f39c" data-name="eject-alt">
              <a href="javascript:void();"><i class="zmdi zmdi-eject-alt"></i> <span>eject-alt</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f39d" data-name="eject">
              <a href="javascript:void();"><i class="zmdi zmdi-eject"></i> <span>eject</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f39e" data-name="equalizer">
              <a href="javascript:void();"><i class="zmdi zmdi-equalizer"></i> <span>equalizer</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f39f" data-name="fast-forward">
              <a href="javascript:void();"><i class="zmdi zmdi-fast-forward"></i> <span>fast-forward</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a0" data-name="fast-rewind">
              <a href="javascript:void();"><i class="zmdi zmdi-fast-rewind"></i> <span>fast-rewind</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a1" data-name="forward-10">
              <a href="javascript:void();"><i class="zmdi zmdi-forward-10"></i> <span>forward-10</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a2" data-name="forward-30">
              <a href="javascript:void();"><i class="zmdi zmdi-forward-30"></i> <span>forward-30</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a3" data-name="forward-5">
              <a href="javascript:void();"><i class="zmdi zmdi-forward-5"></i> <span>forward-5</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a4" data-name="hearing">
              <a href="javascript:void();"><i class="zmdi zmdi-hearing"></i> <span>hearing</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a5" data-name="pause-circle-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-pause-circle-outline"></i> <span>pause-circle-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a6" data-name="pause-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-pause-circle"></i> <span>pause-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a7" data-name="pause">
              <a href="javascript:void();"><i class="zmdi zmdi-pause"></i> <span>pause</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a8" data-name="play-circle-outline">
              <a href="javascript:void();"><i class="zmdi zmdi-play-circle-outline"></i> <span>play-circle-outline</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3a9" data-name="play-circle">
              <a href="javascript:void();"><i class="zmdi zmdi-play-circle"></i> <span>play-circle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3aa" data-name="play">
              <a href="javascript:void();"><i class="zmdi zmdi-play"></i> <span>play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ab" data-name="playlist-audio">
              <a href="javascript:void();"><i class="zmdi zmdi-playlist-audio"></i> <span>playlist-audio</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ac" data-name="playlist-plus">
              <a href="javascript:void();"><i class="zmdi zmdi-playlist-plus"></i> <span>playlist-plus</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ad" data-name="repeat-one">
              <a href="javascript:void();"><i class="zmdi zmdi-repeat-one"></i> <span>repeat-one</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ae" data-name="repeat">
              <a href="javascript:void();"><i class="zmdi zmdi-repeat"></i> <span>repeat</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3af" data-name="replay-10">
              <a href="javascript:void();"><i class="zmdi zmdi-replay-10"></i> <span>replay-10</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b0" data-name="replay-30">
              <a href="javascript:void();"><i class="zmdi zmdi-replay-30"></i> <span>replay-30</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b1" data-name="replay-5">
              <a href="javascript:void();"><i class="zmdi zmdi-replay-5"></i> <span>replay-5</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b2" data-name="replay">
              <a href="javascript:void();"><i class="zmdi zmdi-replay"></i> <span>replay</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b3" data-name="shuffle">
              <a href="javascript:void();"><i class="zmdi zmdi-shuffle"></i> <span>shuffle</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b4" data-name="skip-next">
              <a href="javascript:void();"><i class="zmdi zmdi-skip-next"></i> <span>skip-next</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b5" data-name="skip-previous">
              <a href="javascript:void();"><i class="zmdi zmdi-skip-previous"></i> <span>skip-previous</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b6" data-name="stop">
              <a href="javascript:void();"><i class="zmdi zmdi-stop"></i> <span>stop</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b7" data-name="surround-sound">
              <a href="javascript:void();"><i class="zmdi zmdi-surround-sound"></i> <span>surround-sound</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b8" data-name="tune">
              <a href="javascript:void();"><i class="zmdi zmdi-tune"></i> <span>tune</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3b9" data-name="volume-down">
              <a href="javascript:void();"><i class="zmdi zmdi-volume-down"></i> <span>volume-down</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ba" data-name="volume-mute">
              <a href="javascript:void();"><i class="zmdi zmdi-volume-mute"></i> <span>volume-mute</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3bb" data-name="volume-off">
              <a href="javascript:void();"><i class="zmdi zmdi-volume-off"></i> <span>volume-off</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3bc" data-name="volume-up">
              <a href="javascript:void();"><i class="zmdi zmdi-volume-up"></i> <span>volume-up</span></a>
            </div>
          </div>
          <h3>Numbers</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f3bd" data-name="n-1-square">
              <a href="javascript:void();"><i class="zmdi zmdi-n-1-square"></i> <span>n-1-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3be" data-name="n-2-square">
              <a href="javascript:void();"><i class="zmdi zmdi-n-2-square"></i> <span>n-2-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3bf" data-name="n-3-square">
              <a href="javascript:void();"><i class="zmdi zmdi-n-3-square"></i> <span>n-3-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c0" data-name="n-4-square">
              <a href="javascript:void();"><i class="zmdi zmdi-n-4-square"></i> <span>n-4-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c1" data-name="n-5-square">
              <a href="javascript:void();"><i class="zmdi zmdi-n-5-square"></i> <span>n-5-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c2" data-name="n-6-square">
              <a href="javascript:void();"><i class="zmdi zmdi-n-6-square"></i> <span>n-6-square</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c3" data-name="neg-1">
              <a href="javascript:void();"><i class="zmdi zmdi-neg-1"></i> <span>neg-1</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c4" data-name="neg-2">
              <a href="javascript:void();"><i class="zmdi zmdi-neg-2"></i> <span>neg-2</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c5" data-name="plus-1">
              <a href="javascript:void();"><i class="zmdi zmdi-plus-1"></i> <span>plus-1</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c6" data-name="plus-2">
              <a href="javascript:void();"><i class="zmdi zmdi-plus-2"></i> <span>plus-2</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c7" data-name="sec-10">
              <a href="javascript:void();"><i class="zmdi zmdi-sec-10"></i> <span>sec-10</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c8" data-name="sec-3">
              <a href="javascript:void();"><i class="zmdi zmdi-sec-3"></i> <span>sec-3</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3c9" data-name="zero">
              <a href="javascript:void();"><i class="zmdi zmdi-zero"></i> <span>zero</span></a>
            </div>
          </div>
          <h3>Other</h3>
          <hr>
          <div class="row">
            <div class="icon col-sm-3" data-code="f3ca" data-name="airline-seat-flat-angled">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-flat-angled"></i> <span>airline-seat-flat-angled</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3cb" data-name="airline-seat-flat">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-flat"></i> <span>airline-seat-flat</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3cc" data-name="airline-seat-individual-suite">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-individual-suite"></i> <span>airline-seat-individual-suite</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3cd" data-name="airline-seat-legroom-extra">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-legroom-extra"></i> <span>airline-seat-legroom-extra</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3ce" data-name="airline-seat-legroom-normal">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-legroom-normal"></i> <span>airline-seat-legroom-normal</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3cf" data-name="airline-seat-legroom-reduced">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-legroom-reduced"></i> <span>airline-seat-legroom-reduced</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d0" data-name="airline-seat-recline-extra">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-recline-extra"></i> <span>airline-seat-recline-extra</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d1" data-name="airline-seat-recline-normal">
              <a href="javascript:void();"><i class="zmdi zmdi-airline-seat-recline-normal"></i> <span>airline-seat-recline-normal</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d2" data-name="airplay">
              <a href="javascript:void();"><i class="zmdi zmdi-airplay"></i> <span>airplay</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d3" data-name="closed-caption">
              <a href="javascript:void();"><i class="zmdi zmdi-closed-caption"></i> <span>closed-caption</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d4" data-name="confirmation-number">
              <a href="javascript:void();"><i class="zmdi zmdi-confirmation-number"></i> <span>confirmation-number</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d5" data-name="developer-board">
              <a href="javascript:void();"><i class="zmdi zmdi-developer-board"></i> <span>developer-board</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d6" data-name="disc-full">
              <a href="javascript:void();"><i class="zmdi zmdi-disc-full"></i> <span>disc-full</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d7" data-name="explicit">
              <a href="javascript:void();"><i class="zmdi zmdi-explicit"></i> <span>explicit</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d8" data-name="flight-land">
              <a href="javascript:void();"><i class="zmdi zmdi-flight-land"></i> <span>flight-land</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3d9" data-name="flight-takeoff">
              <a href="javascript:void();"><i class="zmdi zmdi-flight-takeoff"></i> <span>flight-takeoff</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3da" data-name="flip-to-back">
              <a href="javascript:void();"><i class="zmdi zmdi-flip-to-back"></i> <span>flip-to-back</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3db" data-name="flip-to-front">
              <a href="javascript:void();"><i class="zmdi zmdi-flip-to-front"></i> <span>flip-to-front</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3dc" data-name="group-work">
              <a href="javascript:void();"><i class="zmdi zmdi-group-work"></i> <span>group-work</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3dd" data-name="hd">
              <a href="javascript:void();"><i class="zmdi zmdi-hd"></i> <span>hd</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3de" data-name="hq">
              <a href="javascript:void();"><i class="zmdi zmdi-hq"></i> <span>hq</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3df" data-name="markunread-mailbox">
              <a href="javascript:void();"><i class="zmdi zmdi-markunread-mailbox"></i> <span>markunread-mailbox</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e0" data-name="memory">
              <a href="javascript:void();"><i class="zmdi zmdi-memory"></i> <span>memory</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e1" data-name="nfc">
              <a href="javascript:void();"><i class="zmdi zmdi-nfc"></i> <span>nfc</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e2" data-name="play-for-work">
              <a href="javascript:void();"><i class="zmdi zmdi-play-for-work"></i> <span>play-for-work</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e3" data-name="power-input">
              <a href="javascript:void();"><i class="zmdi zmdi-power-input"></i> <span>power-input</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e4" data-name="present-to-all">
              <a href="javascript:void();"><i class="zmdi zmdi-present-to-all"></i> <span>present-to-all</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e5" data-name="satellite">
              <a href="javascript:void();"><i class="zmdi zmdi-satellite"></i> <span>satellite</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e6" data-name="tap-and-play">
              <a href="javascript:void();"><i class="zmdi zmdi-tap-and-play"></i> <span>tap-and-play</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e7" data-name="vibration">
              <a href="javascript:void();"><i class="zmdi zmdi-vibration"></i> <span>vibration</span></a>
            </div>
            <div class="icon col-sm-3" data-code="f3e8" data-name="voicemail">
              <a href="javascript:void();"><i class="zmdi zmdi-voicemail"></i> <span>voicemail</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!--End Row-->

    </div>
    <!-- End container-fluid-->
    
    </div><!--End content-wrapper-->
   <!--Start Back To Top Button-->
    <a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->
	
	<!--Start footer-->
	<footer class="footer">
      <div class="container">
        <div class="text-center">
          Copyright © 2018 <a href="http://www.17sucai.com/">Rukada</a> Admin
        </div>
      </div>
    </footer>
	<!--End footer-->
   
  </div><!--End wrapper-->


  <!-- Bootstrap core JavaScript-->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
	
	<!-- simplebar js -->
	<script src="assets/plugins/simplebar/js/simplebar.js"></script>
  <!-- waves effect js -->
  <script src="assets/js/waves.js"></script>
	<!-- sidebar-menu js -->
	<script src="assets/js/sidebar-menu.js"></script>
  <!-- Custom scripts -->
  <script src="assets/js/app-script.js"></script>
	
</body>
</html>
